mobile navigation bar updated

Team-Inventrix · Feb 20, 2024 · 14d337d · 14d337d
1 parent 11a376f
commit 14d337d
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 75 deletions.
diff --git a/public/style.css b/public/style.css
@@ -39,6 +39,7 @@ a {
 
 .active {
   border-bottom: 3px solid #226a49;
+  font-weight: bolder;
 }
 
 /* a.active img{

diff --git a/src/component/Header.js b/src/component/Header.js
@@ -74,8 +74,9 @@ function Header() {
                 px: 0,
               }}
               style={{
-                display:"flex",
-                justifyContent:"space-between", alignItems:"center",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
               }}
             >
               <Link
@@ -331,87 +332,98 @@ function Header() {
                 <MenuIcon />
               </Button>
               <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
-                <Box
-                  sx={{
-                    minWidth: "60dvw",
-                    p: 2,
-                    backgroundColor: "background.paper",
-                    flexGrow: 1,
-                  }}
-                >
                   <Box
                     sx={{
+                      minWidth: "60dvw",
+                    p: 3,
+                    backgroundColor: "background.paper",
                       display: "flex",
                       flexDirection: "column",
+                      gap:"3vw",
                       alignItems: "end",
                       flexGrow: 1,
+                      fontSize: "clamp(1rem, 3vw, 3rem)"
                     }}
-                  ></Box>
-                  <Link
-                    to="os"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    Our Story
-                  </Link>
-                  <Link
-                    to="ps"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    problem Statement
-                  </Link>
-                  <Link
-                    to="mc"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
                   >
-                    Material Composition
-                  </Link>
-                  <Link
-                    to="oi"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    Our Impact
-                  </Link>
-                  <Link
-                    to="p"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    Product
-                  </Link>
-                  <Link
-                    to="faq"
-                    spy={true}
-                    smooth={true}
-                    offset={50}
-                    duration={500}
-                  >
-                    FAQ
-                  </Link>
-                  <Link
-                    to="a"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    About
-                  </Link>
+                    <Link
+                      to="os"
+                      spy={true}
+                      smooth={true}
+                      offset={0}
+                      duration={500}
+                      activeClass="active"
+                      p="1rem"
+                    >
+                      Our Story
+                    </Link>
+                    <Link
+                      to="ps"
+                      spy={true}
+                      smooth={true}
+                      offset={0}
+                      duration={500}
+                      activeClass="active"
+                      p="1rem"
+                    >
+                      problem Statement
+                    </Link>
+                    <Link
+                      to="mc"
+                      spy={true}
+                      smooth={true}
+                      offset={0}
+                      duration={500}
+                      activeClass="active"
+                      p="1rem"
+                    >
+                      Material Composition
+                    </Link>
+                    <Link
+                      to="oi"
+                      spy={true}
+                      smooth={true}
+                      offset={0}
+                      duration={500}
+                      activeClass="active"
+                      p="1rem"
+                    >
+                      Our Impact
+                    </Link>
+                    <Link
+                      to="p"
+                      spy={true}
+                      smooth={true}
+                      offset={0}
+                      duration={500}
+                      activeClass="active"
+                      p="1rem"
+                    >
+                      Product
+                    </Link>
+                    <Link
+                      to="faq"
+                      spy={true}
+                      smooth={true}
+                      offset={50}
+                      duration={500}
+                      activeClass="active"
+                      p="1rem"
+                    >
+                      FAQ
+                    </Link>
+                    <Link
+                      to="a"
+                      spy={true}
+                      smooth={true}
+                      offset={0}
+                      duration={500}
+                      activeClass="active"
+                      p="1rem"
+                    >
+                      About
+                    </Link>
+                  </Box>
                   <Divider />
-                </Box>
               </Drawer>
             </Box>
           </Toolbar>
@@ -421,4 +433,4 @@ function Header() {
   );
 }
 
-export default Header;
+export default Header;