Added Dark Mode

AbhiDiva96 · Jun 19, 2024 · b15d626 · b15d626
1 parent 463743d
commit b15d626
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 7 deletions.
diff --git a/src/pages/header.css b/src/pages/header.css
@@ -20,7 +20,64 @@
    transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
      border-radius: 0px;
   }
+  .hamburger{
+    display: none !important;
+  }
+  .hamburger div {
+    width: 25px;
+    height: 3px;
+    background-color: #333;
+    transition: 0.4s;
+}
+@media only screen and (max-width:510px){
+  .hamburger {
+    align-items: center;
+  display: flex !important;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  cursor: pointer;
+  }
+  .active .hamburger div{
+    background-color: white !important;
+  }
+  .container{
+    z-index: 1;
+  }
+  .elements{
+    width: 100vw !important;
+    display: flex;
+    flex-direction: column;
+    align-items: center !important;
+    position: fixed;
+    gap: 20px !important;
+    top: 105px !important;
+    background-color: #e6e6fa;
+    overflow: hidden;
+    animation: animate 0.3s ease-in;
+  }
+  .active .elements{
+    background-color: #000016;
+    color: white;
+  }
+  .container2{
+    display: none !important;
+  }
+  .mode{
+    position: absolute;
+    right: 20px !important;
+  }
+}
+
 
+@keyframes animate {
+    from{
+      height: 0px ;
+    }to{
+      height: 200px !important;
+
+    }
+}
   .header{
     display: flex;
     justify-content: space-around;

diff --git a/src/pages/header.js b/src/pages/header.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import './header.css';
 import {Link} from "react-router-dom";
 import { colors } from '@mui/material';
@@ -9,6 +9,7 @@ import {HiSun,HiMoon} from 'react-icons/hi2'
 
 function Header() {
     let {theme,toggleTheme} =useContext(ThemeContext)
+    const [isOpen,setIsOpen]=useState(false)
     function handleClick(e){
             if(theme=="dark"){
                 toggleTheme('light')
@@ -17,7 +18,9 @@ function Header() {
             }
     }
     //  const {isDarkMode, togglerDarkMode} =useTheme();
-
+function handleHamClick(){
+   isOpen?setIsOpen(false): setIsOpen(true)
+}
   return (      
     <div className="frame">
     <div className="header">
@@ -26,7 +29,29 @@ function Header() {
                 <img src="/logo.png" alt="logo" />
             </Link>
         </div>
-        <div style={{ display: 'flex', gap: '20px',flexWrap:"wrap" }}>
+    <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>
+
+        <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>
@@ -36,11 +61,12 @@ function Header() {
             <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>
+          }  
     </div>
 </div>