Responsive Navbar

body routes fix sticky nav & footer
CODECHAMPS7 · Sep 18, 2024 · 56c0abf · 56c0abf
1 parent f1c0a83
commit 56c0abf
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 30 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,24 +6,28 @@ import Login from './Pages/Login';
 import Signup from './Pages/SIgnup';  // Fix casing for Signup
 import Dashboard from './Pages/Dashboard';
 import Profile from './Pages/profile';
+import Footer from './components/Footer';
 
 const Layout = () => {
   return (
-    <>
+    <div className="flex flex-col min-h-screen">
       <Home />
-      <Outlet /> 
-    </>
+      <div className="flex-grow">
+        <Outlet />
+      </div>
+      <Footer />
+    </div>
   );
 }
 
+
 function App() {
   return (
     <Router>
       <Routes>
 
         <Route path="/" element={<Layout />}>
-
-          <Route path="body" element={<Body />} />
+          <Route path="/" element={<Body />} />
           <Route path="login" element={<Login />} />
           <Route path="signup" element={<Signup />} /> 
           <Route path="dashboard" element={<Dashboard />} />

diff --git a/src/Pages/Dashboard.jsx b/src/Pages/Dashboard.jsx
@@ -2,7 +2,7 @@ import image1 from '../Assets/nda.jpeg'
 import image2 from '../Assets/ssc.jpg'
 import image3 from '../Assets/sbi.jpg'
 import image4 from '../Assets/cds.jpg'
-import Govlogo from '../Assets/govlogo.jpg'
+// import Govlogo from '../Assets/govlogo.jpg'
 
 const Dashboard = () => {
 
@@ -144,17 +144,6 @@ const Dashboard = () => {
 
     {/* Footer section */}
 
-      <footer className='bg-[#e2e8f0] text-black py-4 '>
-        <div className='container flex mx-auto items-center justify-between px-4'>
-          <div className='flex items-center'>
-            <img src={Govlogo} alt="" className="h-11"/>
-            <span className="ml-4 text-lg font-semibold">&copy; Government of India </span>
-          </div>
-          <div>
-            <p>Toll Free Contact Number : 0000 0000</p>
-          </div>
-        </div>
-      </footer>
 
     </div>
   );

diff --git a/src/components/Body.jsx b/src/components/Body.jsx
@@ -1,10 +1,12 @@
-
 const Body = () => {
   return (
-    <div>
-      <h1>Body</h1>
+    <div className="p-5 max-w-2xl mx-auto text-center">
+      <h1 className="text-4xl font-bold my-5">Body</h1>
+      <p className="text-lg">
+       Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo id sunt quam unde velit officia enim ad iusto nulla, fugit odit saepe consequuntur tenetur beatae, laboriosam, dolore sint? Non, debitis!
+      </p>
     </div>
-  )
+  );
 }
 
-export default Body
+export default Body;
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,19 @@
+const Footer = () => {
+    return (
+      <div>
+        <footer className='bg-[#e2e8f0] text-black py-4 pt-5'>
+          <div className='container mx-auto flex flex-col md:flex-row items-center justify-between px-4'>
+            <div className='flex items-center text-center mb-4 md:mb-0'>
+              <span className="ml-4 text-lg font-semibold">&copy; Government of India</span>
+            </div>
+            <div className='text-center'>
+              <p>Toll-Free Contact Number: 1800 000 0000</p>
+            </div>
+          </div>
+        </footer>
+      </div>
+    );
+  };
+
+  export default Footer;
+
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,27 +1,38 @@
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import { FaUserCircle } from "react-icons/fa";
+import { FaBars, FaTimes } from "react-icons/fa"; 
 import Image from "../Assets/image.png";
 
 const Navbar = () => {
+  const [isOpen, setIsOpen] = useState(false); 
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
   return (
-    <div className="flex flex-col md:flex-row items-center justify-between px-6 py-4 bg-[#e2e8f0] shadow-lg shadow-slate-500">
-      {/* Logo Section */}
+    <div className="relative flex flex-col md:flex-row items-center justify-between px-6 py-4 bg-[#e2e8f0] shadow-lg shadow-slate-500">
+
       <div className="mb-4 md:mb-0">
         <Link to="/">
           <img src={Image} alt="Logo" className="w-36" />
         </Link>
       </div>
 
-      {/* Nav Links Section */}
-      <div className="flex flex-col md:flex-row items-center gap-6 text-lg">
+
+      <div className="md:hidden flex items-center" onClick={toggleMenu}>
+        {isOpen ? <FaTimes className="text-2xl cursor-pointer" /> : <FaBars className="text-2xl cursor-pointer" />}
+      </div>
+
+
+      <div className={`flex-col md:flex-row items-center gap-6 text-lg ${isOpen ? "flex" : "hidden"} md:flex`}>
         <Link
           to="/dashboard"
           className="text-black hover:text-gray-700 transition duration-300 ease-in-out"
         >
           Dashboard
         </Link>
-
-        {/* Login/Sign Up Button */}
         <Link
           to="/login"
           className="bg-blue-500 text-white py-2 px-4 rounded-full hover:bg-blue-600 transition duration-300 ease-in-out"
@@ -35,7 +46,6 @@ const Navbar = () => {
           Sign Up
         </Link>
 
-        {/* Profile with Icon */}
         <Link
           to="/profile"
           className="flex items-center text-black hover:text-gray-700 transition duration-300 ease-in-out"
@@ -46,4 +56,5 @@ const Navbar = () => {
     </div>
   );
 };
+
 export default Navbar;
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* Your custom styles below */
+html, body {
+  height: 100%;
+  margin: 0; /* Remove default margin */
+}
+
+.min-h-screen {
+  min-height: 100vh; /* Ensures the layout takes at least the full viewport height */
+}