Improved navbar in mobile view (#251)

* showing mobile view navbar

* navbar commit for mobile screen

* fixed position of navbar and product list

* navbar closes when an item is clicked & font size

* Update styles.css

src/components/Feedback/Feedback.css

@@ -10,7 +10,7 @@
   width: 99vw;
 }
 
-input[type=text],
+input[type="text"],
 textarea {
   width: 80%;
   padding: 12px;
@@ -34,3 +34,8 @@ textarea {
 .btn:hover {
   background-color: #45a049;
 }
+@media only screen and (max-width: 768px) {
+  .container {
+    padding-top: 5rem;
+  }
+}

src/components/Footer/Footer.css

@@ -42,10 +42,10 @@
   box-sizing: border-box;
 }
 .action form {
-  display:  flex ;
-  justify-content:  center;
+  display: flex;
+  justify-content: center;
   align-items: center;
-  gap:0 1rem;
+  gap: 0 1rem;
 }
 
 .action form input[type="email"] {
@@ -87,7 +87,6 @@
   letter-spacing: 2px;
 }
 
-
 :root {
   --bg-color: #ffffff;
   --text-color: #121212;
@@ -100,13 +99,6 @@
   background: var(--text-color);
 }
 
-.main-content {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(210px, auto));
-  gap: 2rem;
-  margin-bottom: 3rem;
-}
-
 .contact-content a {
   color: var(--bg-color);
   display: block;
@@ -132,10 +124,10 @@
   box-sizing: border-box;
 }
 .action form {
-  display:  flex ;
-  justify-content:  center;
+  display: flex;
+  justify-content: center;
   align-items: center;
-  gap:0 1rem;
+  gap: 0 1rem;
 }
 
 .action form input[type="email"] {
@@ -177,8 +169,13 @@
   letter-spacing: 2px;
 }
 
-
-@media (max-width :560px) {
+@media (max-width: 560px) {
+  .contact {
+    margin-top: 7rem;
+  }
+  .main-content {
+    margin-top: 5%;
+  }
   .action {
     width: 100%;
   }
@@ -192,7 +189,7 @@
     gap: 1rem 0;
     width: 100%;
   }
-  .action form input[type="submit"]{
+  .action form input[type="submit"] {
     width: 100%;
   }
-}
+}

src/components/Header/Header.jsx

@@ -8,10 +8,13 @@ const Header = () => {
     { label: "About", Path: "/about" },
     { label: "Feedback", Path: "/feedback" },
     { label: "Contact", Path: "/contact" },
-    {label: 'SignIn', Path: '/sign-in'},
-    {label: 'SignUp', Path: '/sign-up'}
+    { label: "SignIn", Path: "/sign-in" },
+    { label: "SignUp", Path: "/sign-up" },
   ];
   const [showMobileSidebar, setShowMobileSidebar] = useState(true);
+  const handleItemClick = () => {
+    setShowMobileSidebar(true);
+  };
   return (
     <header>
       {/* Mobile Menu Icon */}
@@ -31,23 +34,28 @@ const Header = () => {
             onClick={() => setShowMobileSidebar(!showMobileSidebar)}
           >
             {Array.from({ length: 2 + showMobileSidebar }, (_, i) => (
-              <div key={i} className={i === 0 ? "firstbar" : i === 1 ? "secondbar" : "lastbar"}/>
+              <div
+                key={i}
+                className={
+                  i === 0 ? "firstbar" : i === 1 ? "secondbar" : "lastbar"
+                }
+              />
             ))}
             {/* If the condition is true, only the first, second, and last div elements will be rendered. */}
           </div>
         </div>
         {/* Desktop Navigation */}
-        <ul className={`desktop-nav ${showMobileSidebar ? "hide" : ""}`}>
-          {navigationLinks.map((items, key) => {
-            return (
-              <Link to={items.Path} key={key}>
-                {items.label}
-              </Link>
-            );
-            /* activeStyle={{ color: "blue", textDecoration: "underline" }} */
-          })}
-        </ul>
       </nav>
+      <ul className={`desktop-nav ${showMobileSidebar ? "" : "show"}`}>
+        {navigationLinks.map((items, key) => {
+          return (
+            <li key={key} onClick={handleItemClick}>
+              <Link to={items.Path}>{items.label}</Link>
+            </li>
+          );
+          /* activeStyle={{ color: "blue", textDecoration: "underline" }} */
+        })}
+      </ul>
     </header>
   );
 };

src/components/Header/styles.css

@@ -1,38 +1,37 @@
 /* styles for header */
-:root{
-  --Bg : #000;
+:root {
+  --Bg: #000;
   --text: #fff;
 }
 header {
   align-items: center;
-  background:var(--Bg);
+  background: var(--Bg);
   display: flex;
-  padding: .8rem;
-  position: inherit;
+  padding: 0.8rem;
 }
 ::-webkit-scrollbar {
   width: 8px;
   border-radius: 8px;
 }
 ::-webkit-scrollbar-track {
-  background:none !important;
+  background: none !important;
 }
 ::-webkit-scrollbar-thumb {
-  background: #68707a; 
+  background: #68707a;
   border-radius: 8px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #68707a; 
+  background: #68707a;
 }
 /* styles for navigation links */
+
 nav {
   align-items: center;
   color: var(--text);
   display: flex;
   justify-content: space-between;
   width: 100%;
-
 }
 
 nav .navtop {
@@ -43,48 +42,51 @@ nav .navtop {
   width: fit-content;
 }
 
-nav ul {
+.desktop-nav {
   display: flex;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-nav a {
+.desktop-nav li {
+  padding: 1rem;
+}
+
+.desktop-nav a {
   color: var(--text);
   font-size: 1.1rem;
   font-weight: 600;
-  padding: 0 1rem;
   text-decoration: none;
   transition: 0.5s all ease-in-out;
   position: relative;
 }
 
- a::before
-{
- content: "";
- background-color:  #c4c1e0;
- position: absolute;
- left: 0;
- bottom: -0.3rem;
- height: 2px;
- width: 0;
- transition: 0.3s ease-in-out;
-}
-a:hover::before
-{
+a::before {
+  content: "";
+  background-color: #c4c1e0;
+  position: absolute;
+  left: 0;
+  bottom: -0.3rem;
+  height: 2px;
+  width: 0;
+  transition: 0.3s ease-in-out;
+}
+a:hover::before {
   content: "";
   background-color: #c4c1e0;
- position: absolute;
- left: 0;
- bottom: -0.3rem;
- height: 2px;
- width: 90%;
+  position: absolute;
+  left: 0;
+  bottom: -0.3rem;
+  height: 2px;
+  width: 90%;
 }
 
 nav .project-title {
   font-size: 1.5rem;
   font-weight: bold;
+  text-decoration: none;
+  color: var(--text);
 }
 
 nav .project-title:hover {
@@ -113,24 +115,6 @@ nav .project-title:hover {
   transform: rotate(-45deg);
 }
 
-/* styles for mobile sidebar */
-.mobile-sidebar {
-  background: var(--text);
-  display: none;
-  height: 100%;
-  padding: 1rem;
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 70%;
-  z-index: 3;
-}
-
-.mobile-sidebar ul {
-  display: flex;
-  flex-direction: column;
-}
-
 /* Media Query for small screens */
 @media screen and (max-width: 768px) {
   header {
@@ -140,15 +124,15 @@ nav .project-title:hover {
   nav {
     box-sizing: border-box;
     flex-direction: column;
-    padding: 0 0.5rem;
   }
 
   nav .navtop {
+    top: 0;
     width: 100%;
-  }
-
-  nav ul {
-    flex-direction: column;
+    position: fixed;
+    z-index: 1000;
+    background-color: var(--Bg);
+    padding: 0 0.5rem;
   }
 
   nav a {
@@ -166,26 +150,26 @@ nav .project-title:hover {
   }
 
   .desktop-nav {
+    position: fixed;
+    top: 7%;
+    right: -100%; /* Initially off-screen */
+    width: 50%; /* Adjust the width as needed */
+    height: 100%;
+    background-color: #000000;
+    transition: right 0.3s ease; /* Transition the right property */
+    z-index: 3;
     display: flex;
     flex-direction: column;
-    text-align: center;
-    width: 100%;
-    border-top: 2px solid #222;
-    box-sizing: border-box;
-    margin-top: .25rem;
+    padding: 20% 5%;
   }
 
-  .desktop-nav.hide {
-    display: none;
+  .desktop-nav.show {
+    right: 0; /* Slide in from the right */
   }
-
-  .mobile-sidebar {
+  .desktop-nav a {
     display: block;
-  }
+    text-decoration: none;
 
-  /* Align mobile menu items to the right in responsive view */
-  .mobile-sidebar ul {
-    justify-content: flex-end;
-
+    margin-bottom: 20%; /* Add margin between the links */
   }
-}
+}

src/components/ProductList/ProductList.css

@@ -10,3 +10,8 @@
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
 }
 
+@media only screen and (max-width: 768px) {
+  .list-view {
+    padding-top: 5rem;
+  }
+}