From d5d211668e127a3d4a8e75474dd4feedd0c08a9c Mon Sep 17 00:00:00 2001 From: Ayushmaanagarwal1121 Date: Sun, 23 Jun 2024 13:07:31 +0530 Subject: [PATCH 1/4] Added Hamburger --- src/pages/header.css | 67 +++++++++++++++++++++++++++++++++++++++++ src/pages/header.js | 71 +++++++++++++++++++++++++++++++------------- 2 files changed, 118 insertions(+), 20 deletions(-) diff --git a/src/pages/header.css b/src/pages/header.css index 8e763c3..2e0ae1e 100644 --- a/src/pages/header.css +++ b/src/pages/header.css @@ -173,3 +173,70 @@ --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: 50vw !important; + display: flex; + flex-direction: column; + padding-top: 10px !important; + align-items: center !important; + position: fixed; + gap: 20px !important; + top: 105px !important; + background-color: #e6e6fa; + overflow: hidden; + animation: animate 0.3s ease-in; + right: 0px !important; + border-radius: 15px !important; +} +.active .elements{ + background-color: #000016; + color: white; +} +.container2{ + display: none !important; +} +.mode{ + position: absolute; + right: 20px !important; +}.mode{ + right: 70px !important; + display: block !important; +} +}@keyframes animate { + from{ + height: 0px ; + }to{ + height: 200px !important; + + } +} \ No newline at end of file diff --git a/src/pages/header.js b/src/pages/header.js index 2a56f9c..25b30d5 100644 --- 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 (
@@ -25,23 +33,46 @@ function Header() { logo
-
- - Review Us - - - Login - - - About Us - - {theme === 'dark' ? : } -
-
- {isMenuOpen ? : } -
+
+ + Review Us + + + Login + + + About Us + + { + + theme=='dark'? : + } +
+ { + +theme=='dark'? : +} +
+
+
+
+
+ { + isOpen &&
+ + Review Us + + + Login + + + About Us + +
-
+ } + + ); } From 807a786541d9f03ac31ebfa2da5311b94d14ae72 Mon Sep 17 00:00:00 2001 From: Ayushmaanagarwal1121 Date: Sun, 23 Jun 2024 13:28:01 +0530 Subject: [PATCH 2/4] Updated Changes --- src/pages/header.css | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/pages/header.css b/src/pages/header.css index 2e0ae1e..deb700a 100644 --- a/src/pages/header.css +++ b/src/pages/header.css @@ -204,7 +204,7 @@ right: 20px !important; } .elements{ - width: 50vw !important; + width: 100vw !important; display: flex; flex-direction: column; padding-top: 10px !important; @@ -214,7 +214,6 @@ right: 20px !important; top: 105px !important; background-color: #e6e6fa; overflow: hidden; - animation: animate 0.3s ease-in; right: 0px !important; border-radius: 15px !important; } @@ -232,11 +231,4 @@ right: 20px !important; right: 70px !important; display: block !important; } -}@keyframes animate { - from{ - height: 0px ; - }to{ - height: 200px !important; - - } } \ No newline at end of file From 6d567579a85ce05d3048084a5147124dc30a9660 Mon Sep 17 00:00:00 2001 From: Ayushmaanagarwal1121 Date: Sun, 23 Jun 2024 13:38:38 +0530 Subject: [PATCH 3/4] Updated blue background --- src/pages/header.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/header.css b/src/pages/header.css index deb700a..dd4ee70 100644 --- a/src/pages/header.css +++ b/src/pages/header.css @@ -203,7 +203,7 @@ right: 20px !important; z-index: 1; } -.elements{ +.elements { width: 100vw !important; display: flex; flex-direction: column; @@ -212,13 +212,15 @@ right: 20px !important; position: fixed; gap: 20px !important; top: 105px !important; - background-color: #e6e6fa; + background-color: rgba(230, 230, 250, 0.6); /* Light purple with some transparency */ + backdrop-filter: blur(10px); /* Adjust the blur radius as needed */ overflow: hidden; right: 0px !important; border-radius: 15px !important; } + .active .elements{ - background-color: #000016; + background-color: rgba(0, 0, 0, 0.6); color: white; } .container2{ From 6a545752bfe1c2e27fe95feb6c5157152b1ec5d7 Mon Sep 17 00:00:00 2001 From: Ayushmaanagarwal1121 Date: Sun, 23 Jun 2024 13:40:47 +0530 Subject: [PATCH 4/4] changed blur to 7 --- src/pages/header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/header.css b/src/pages/header.css index dd4ee70..074c72f 100644 --- a/src/pages/header.css +++ b/src/pages/header.css @@ -213,7 +213,7 @@ right: 20px !important; gap: 20px !important; top: 105px !important; background-color: rgba(230, 230, 250, 0.6); /* Light purple with some transparency */ - backdrop-filter: blur(10px); /* Adjust the blur radius as needed */ + backdrop-filter: blur(7px); /* Adjust the blur radius as needed */ overflow: hidden; right: 0px !important; border-radius: 15px !important;