Merge pull request #206 from Ayushmaanagarwal1211/Add-hamburger-in-we…

…bsite Added Hamburger Menu
AbhiDiva96 · Jun 23, 2024 · 80c053a · 80c053a
2 parents c5d6508 + 6a54575
commit 80c053a
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 20 deletions.
diff --git a/src/pages/header.css b/src/pages/header.css
@@ -173,3 +173,64 @@
   --background-color-light: #000000;
   --text-color-light: #fff;
 }
+.hamburger{
+  display: none !important;
+}
+.hamburger div {
+  width: 25px;
+  height: 3px;
+  background-color: #333;
+  transition: 0.4s;
+}
+.mode{
+  display: none;
+}
+@media only screen and (max-width:510px){
+.hamburger {
+  align-items: center;
+display: flex !important;
+flex-direction: column;
+justify-content: center;
+gap: 5px;
+cursor: pointer;
+position: relative;
+right: 20px !important;
+}
+.active .hamburger div{
+  background-color: white !important;
+}
+.container{
+  z-index: 1;
+}
+
+.elements {
+  width: 100vw !important;
+  display: flex;
+  flex-direction: column;
+  padding-top: 10px !important;
+  align-items: center !important;
+  position: fixed;
+  gap: 20px !important;
+  top: 105px !important;
+  background-color: rgba(230, 230, 250, 0.6); /* Light purple with some transparency */
+  backdrop-filter: blur(7px); /* Adjust the blur radius as needed */
+  overflow: hidden;
+  right: 0px !important;
+  border-radius: 15px !important;
+}
+
+.active .elements{
+  background-color: rgba(0, 0, 0, 0.6); 
+  color: white;
+}
+.container2{
+  display: none !important;
+}
+.mode{
+  position: absolute;
+  right: 20px !important;
+}.mode{
+  right: 70px !important;
+  display: block !important;
+}
+}
diff --git a/src/pages/header.js b/src/pages/header.js
@@ -8,15 +8,23 @@ import { FiMenu, FiX } from 'react-icons/fi';
 function Header() {
     const { theme, toggleTheme } = useContext(ThemeContext);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isOpen,setIsOpen]=useState(false)
 
     function handleThemeToggle() {
         toggleTheme(theme === 'dark' ? 'light' : 'dark');
     }
 
-    function handleMenuToggle() {
-        setIsMenuOpen(!isMenuOpen);
-    }
-
+    function handleClick(e){
+        if(theme=="dark"){
+            toggleTheme('light')
+        }else{
+            toggleTheme('dark')
+        }
+}
+//  const {isDarkMode, togglerDarkMode} =useTheme();
+function handleHamClick(){
+isOpen?setIsOpen(false): setIsOpen(true)
+}
     return (
         <div className="frame">
             <div className="header">
@@ -25,23 +33,46 @@ function Header() {
                         <img src="/logo.png" alt="logo" />
                     </Link>
                 </div>
-                <div className={`nav-links ${isMenuOpen ? 'open' : ''} ${theme === 'dark' ? 'dark-mode' : ''}`}>
-                    <a href="/Review" className="logo link1" style={{ padding: 10, margin: 5, height: 30, width: 80 }}>
-                        <b>Review Us</b>
-                    </a>
-                    <a href="/Login" className="logo link1" style={{ padding: 10, margin: 5, height: 30, width: 40 }}>
-                        <b>Login</b>
-                    </a>
-                    <a href="/about" className="logo link1" style={{ padding: 10, margin: 5, height: 30, width: 80 }}>
-                        <b>About Us</b>
-                    </a>
-                    {theme === 'dark' ? <HiSun size={"3rem"} onClick={handleThemeToggle} /> : <HiMoon size={"3rem"} onClick={handleThemeToggle} />}
-                </div>
-                <div className="hamburger" onClick={handleMenuToggle}>
-                    {isMenuOpen ? <FiX size={"3rem"} /> : <FiMenu size={"3rem"} />}
-                </div>
+                <div className='container2' style={{ display: 'flex', gap: '20px',flexWrap:"wrap" }}>
+        <a href="/Review" className="logo link1" style={{ padding: 10, margin: 5, height: 30, width: 80 }}>
+            <b>Review Us</b>
+        </a>
+        <a href="/Login" className="logo link1" style={{ padding: 10, margin: 5, height: 30, width: 40 }}>
+            <b>Login</b>
+        </a>
+        <a href="/about" className="logo link1" style={{ padding: 10, margin: 5, height: 30, width: 80 }}>
+            <b>About Us</b>
+        </a>
+     {
+
+     theme=='dark'? <HiSun size={"3rem"} onClick={handleClick}/>:<HiMoon size={"3rem"} onClick={handleClick}/>
+     }  
+    </div>
+    {
+
+theme=='dark'? <HiSun className='mode' size={"3rem"} onClick={handleClick}/>:<HiMoon className='mode' size={"3rem"} onClick={handleClick}/>
+} 
+        <div class="hamburger" id="hamburger" onClick={handleHamClick}>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+          {
+           isOpen && <div className='elements' style={{zIndex:100}}  >
+            <a href="/Review" className="logo link1" style={{ padding: 10, margin: 5, height: 30, width: 80 }}>
+                <b>Review Us</b>
+            </a>
+            <a href="/Login" className="logo link1" style={{ padding: 10, margin: 5, height: 30, width: 40 }}>
+                <b>Login</b>
+            </a>
+            <a href="/about" className="logo link1" style={{ padding: 10, margin: 5, height: 30, width: 80 }}>
+                <b>About Us</b>
+            </a>
+
             </div>
-        </div>
+          }  
+    </div>
+</div>
     );
 }