navbar responsiveness

PKBAJPAI12 · Aug 19, 2024 · 2731f3a · 2731f3a
1 parent bfe5f81
commit 2731f3a
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 40 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -46,25 +46,7 @@ body{
   background-color: ghostwhite;
 }
 
-.navbar{
-  display: flex;
-  margin-left: 5rem;
-  margin-right: 5rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-.navleft{
-  width: 35%;
-}
-.navcenter{
-  width: 25%;
-  display: flex;
-  justify-content: center;
-  margin: auto;
-  align-items: center;
-}
 .navright{
-  width: 40%;
   display: flex;
   flex-direction: row-reverse;
   margin: auto;
@@ -83,21 +65,62 @@ body{
 .navright ul li a{
   text-decoration: none;
 }
-.navleft ul{
-  display: flex;
-  align-items: center;
-  list-style: none;
-
-}
-
-.navleft ul li{
-  list-style: none;
-  font-size: 1rem;
-  color: blue;
-  padding-left:0.5rem ;
+@media (min-width: 926px){
+  .navbar{
+    display: flex;
+    margin-left: 5rem;
+    margin-right: 5rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  .navleft ul{
+    display: flex;
+    align-items: center;
+    list-style: none;
+
+  }
+
+  .navleft ul li{
+    list-style: none;
+    font-size: 1rem;
+    color: blue;
+    padding-left:0.5rem;
+  }
+  .navleft ul li a{
+    text-decoration: none;
+  }
+  .navcenter{
+    display: flex;
+    margin: auto;
+    align-items: center;
+  }
 }
-.navleft ul li a{
-  text-decoration: none;
+@media (max-width: 925px){
+  .navleft {
+    padding-top: 1rem;
+    padding-left: 2rem;
+  }
+  .navleft ul{
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin-left:3rem;
+  }
+
+  .navleft ul li{
+    list-style: none;
+    font-size: 1rem;
+    color: blue;
+    padding: 0.5rem;
+  }
+  .navleft ul li a{
+    text-decoration: none;
+  }
+  .hamburger {
+    border-bottom: 2px solid darkviolet;
+    width: 2rem;
+    margin-bottom: 5px;
+  }
 }
 .servicesection{
   display: flex;
@@ -131,7 +154,7 @@ body{
   border: 1px solid grey;
   border-radius: 0.8rem;
   display: flex;
-  padding:0.2rem;
+  padding:0.1rem;
   height: 2rem;
   background-color: #ffffff;
 }

diff --git a/frontend/src/components/Search.js b/frontend/src/components/Search.js
@@ -31,7 +31,7 @@ const Search = () => {
           />
         </div>
         <input
-          style={{ borderColor: "transparent", color: "black" }}
+          style={{ borderColor: "transparent", color: "black", width: "9rem" }}
           type="text"
           placeholder="Search a Product"
           name="trans"

diff --git a/frontend/src/components/footer.js b/frontend/src/components/footer.js
@@ -78,7 +78,7 @@ function Footer() {
             paddingTop: "0.6rem",
           }}
         >
-          &#169; 2022 Superior Clothing Brand All Right Reserved
+          &#169; 2024 Superior Clothing Brand All Right Reserved
         </p>
       </div>
     </>

diff --git a/frontend/src/components/navbar.js b/frontend/src/components/navbar.js
@@ -11,6 +11,10 @@ function Navbar() {
   const navigate=useHistory();
   const alert=useAlert();
   const [showDashboard,setShowDashboard]=useState(false);
+  const [isBrandTitle, setIsBrandTitle] = useState(window.innerWidth > 1200);
+  const [isBrandLogo, setIsBrandLogo] = useState(window.innerWidth > 1050);
+  const [isMobile, setIsMobile] = useState(window.innerWidth > 925);
+  const [isOpen, setIsOpen] = useState(false);
   const { isAuthenticated, user } = useSelector(
     (state) => state.user
   );
@@ -28,12 +32,27 @@ function Navbar() {
   }
   useEffect(()=>{
     //store.dispatch(loadUser());
-  },[])
+    const handleResize = () => {
+      setIsBrandTitle(window.innerWidth > 1200);
+      setIsBrandLogo(window.innerWidth > 1050);
+      setIsMobile(window.innerWidth > 925);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup the event listener on component unmount
+    return () => window.removeEventListener('resize', handleResize);
+  })
   return (
     <>
-      <div className="circle7"></div>
+      {isOpen ? (
+        <div className="circle7" style={{top:"13rem"}}></div>
+      ): (
+        <div className="circle7"></div>
+      )}
       <div className="navbar">
         <div className="navleft">
+          {isMobile? (
           <ul className="navleftul">
             <li style={{ paddingRight: "0rem" }}>
               <img
@@ -59,16 +78,63 @@ function Navbar() {
               <Link to="/">Kids</Link>{" "}
             </li>
           </ul>
+          ):(
+            <>
+            {isOpen ? (
+              <div style={{display:"flex"}}>
+              <img
+                onClick={()=>setIsOpen(!isOpen)}
+                style={{ width: "1rem", height:"1rem", marginTop: "10px"}}
+                src={require(`../img/x.png`)}
+                alt=""
+                srcSet=""
+              />
+              <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/products">Collections</Link>
+            </li>
+            <li>
+              <Link to="/">Men</Link>
+            </li>
+            <li>
+              <Link to="/">Women</Link>
+            </li>
+            <li>
+              <Link to="/">Kids</Link>{" "}
+            </li>
+            </ul>
+            </div>
+            ): (
+              <div onClick={()=>setIsOpen(!isOpen)}>
+            <div className="hamburger"></div>
+            <div className="hamburger"></div>
+            <div className="hamburger"></div>
+            </div>
+            )}
+            </>
+          )}
         </div>
-        <div className="navcenter">
+        {isMobile ? (
+          <div className="navcenter">
+        {isBrandLogo &&
           <img
             style={{ width: "3rem", marginRight: "1rem" }}
             src={require(`../img/shopping-store.png`)}
             alt=""
           />
-          <h2 className="">Superior</h2>
+        }
+          {isBrandTitle &&
+            <h2 className="">Superior</h2>
+          }
         </div>
-        <div className="navright">
+        ): (
+          <></>
+        )}
+        {isMobile ? (
+          <div className="navright">
           <ul>
           {isAuthenticated ? (
               <>
@@ -129,6 +195,9 @@ function Navbar() {
           </ul>
           <Search />
         </div>
+        ):(
+          <></>
+        )}
       </div>
     </>
   );

diff --git a/frontend/src/img/x.png b/frontend/src/img/x.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -78,7 +78,7 @@ function Footer() { @@
                 paddingTop: "0.6rem",
               }}
             >
-              &#169; 2022 Superior Clothing Brand All Right Reserved
+              &#169; 2024 Superior Clothing Brand All Right Reserved
             </p>
           </div>
         </>
@@ Expand Down @@