Merge pull request #37 from 1-SubhamSingh/feature/hamburger_fixed_oth…

…er_minor_changes Fixed hamburger menu ,colour, search icon, greeting phrase
dhairyagothi · Oct 2, 2024 · 3a799c3 · 3a799c3
2 parents 89166c3 + 66d1417
commit 3a799c3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/frontend/src/Pages/Herosection.css b/frontend/src/Pages/Herosection.css
@@ -2,14 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
-body{
+body {
     padding: 0;
     margin: 0;
-
-   background-image: url('../assets/mixbg.png');
+    background-image: url('../assets/mixbg.png');
     background-size: cover;
     background-position: center;
     height: 100vh;
-    width: 100%;
+    width: 100vw; 
+    overflow-x : hidden;
+    position: relative; 
 }
-
diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
@@ -27,9 +27,10 @@ const Herosection = () => {
 
         <div className='relative z-50 flex items-center justify-betweenv'>
         <div><HamburgerMenu /></div>
-        <div className='cursor-pointer'><img src={searchsvg} alt="" srcset="" /></div>
+        <div className='cursor-pointer ml-auto mr-8'>
+            <img src={searchsvg} alt="" srcset="" /></div>
         </div>
-        <h1 className='pl-4 text-2xl font-extrabold text-left text-white md:pl-40 '>Namaste !! Yatree </h1>
+        <h1 className='pl-4 text-2xl font-extrabold text-center text-white  '>Namaste !! Yatree </h1>
         <div className="relative flex items-center justify-center bg-center bg-cover herosection">
 
             <div className='relative z-10 grid justify-items-center'>

diff --git a/frontend/src/Pages/hamburger.jsx b/frontend/src/Pages/hamburger.jsx
@@ -24,8 +24,8 @@ const fadeOut = keyframes`
 const MenuIcon = styled.div`
     width: 30px;
     height: 3px;
-    background-color: #333;
-    margin: 6px 0;
+    background-color: white;
+    margin: 6px 20px;
     transition: transform 0.4s, opacity 0.4s;
 `;
 
@@ -39,19 +39,21 @@ const Menu = styled.div`
     display: ${({ open }) => (open ? 'block' : 'none')};
     background-color: white;
     position: absolute;
-    
-    height: 90vh;
-    width: 80vw;
+    height: 100vh;
+    width: 30vw;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     animation: ${({ open }) => (open ? fadeIn : fadeOut)} 0.4s;
+      @media (max-width: 768px) {
+    width: 100vw;
+  }
 `;
 
 const MenuItem = styled.a`
     color: rgb(59 130 246);
-    padding: 12px 16px;
+    padding: 22px 16px;
     text-decoration: none;
     display: block;
-
+    text-align: center;
     &:hover {
         background-color: rgb(59 130 246);
         color:white;
@@ -68,9 +70,9 @@ const Hamburger = () => {
     return (
         <div>
             <HamburgerContainer onClick={toggleMenu}>
-                <MenuIcon style={{ transform: open ? 'rotate(-45deg) translate(-5px, 6px)' : 'rotate(0)' }} />
+                <MenuIcon style={{ transform: open ? 'rotate(-45deg) translate(-25px, -6px)' : 'rotate(0)' }} />
                 <MenuIcon style={{ opacity: open ? 0 : 1 }} />
-                <MenuIcon style={{ transform: open ? 'rotate(45deg) translate(-5px, -6px)' : 'rotate(0)' }} />
+                <MenuIcon style={{ transform: open ? 'rotate(45deg) translate(-25px, 6px)' : 'rotate(0)' }} />
             </HamburgerContainer>
             <Menu open={open}>
                 <MenuItem href="#home">Home</MenuItem>