[test] : Added Header component [complete]

TusharSSurve · Apr 19, 2024 · 252f48c · 252f48c
1 parent 74dcdf7
commit 252f48c
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 3 deletions.
diff --git a/src/global/Header.js b/src/global/Header.js
@@ -4,7 +4,11 @@ import resume from '../assets/resume.pdf';
 import Button from "./Button";
 const Header = () => {
   const [isScrolled, setIsScrolled] = useState(window.pageYOffset > 0);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
   useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.pageYOffset > 0);
@@ -17,12 +21,17 @@ const Header = () => {
   }, []);
 
   return (
-    <header className={`${styles['header']} ${isScrolled ? styles['sticky'] : ''}`}>
+    <header className={`${styles['header']} ${isMenuOpen ? styles['menu-open'] : ''} ${isScrolled ? styles['sticky'] : ''}`}>
       <div className={styles['header-container']}>
         <div className={styles['logo-container']}>
           <a href="/">TUSHAR SURVE</a>
         </div>
-        <div className={styles['navbar-container']}>
+        <div className={`${styles['hamburger-menu']} ${isMenuOpen ? styles['opened'] : ''}`} onClick={toggleMenu}>
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <div className={`${styles['navbar-container']} ${isMenuOpen ? styles['show-menu'] : ''}`}>
           <nav>
             <ul>
               <li><a href="#about">ABOUT</a></li>

diff --git a/src/global/Header.module.css b/src/global/Header.module.css
@@ -68,4 +68,108 @@ header a {
   text-decoration: none;
 }
 
-@media (max-width: 769px) {}
+.hamburger-menu {
+  display: none;
+}
+
+@media (max-width: 768px) {
+
+  .header.sticky,
+  .header {
+    margin: 0;
+    padding: 15px 0;
+    background-color: var(--dark-grey-color);
+  }
+
+  .hamburger-menu {
+    display: block;
+  }
+
+  .hamburger-menu span {
+    height: 2px;
+    position: relative;
+    display: block;
+    width: 18px;
+    background-color: var(--white-color);
+  }
+
+  .hamburger-menu span:first-of-type {
+    bottom: 3px;
+    transition: transform 0.3s ease;
+  }
+
+  .hamburger-menu span:last-of-type {
+    top: 3px;
+    transition: transform 0.3s ease;
+  }
+
+  .hamburger-menu.opened span:first-of-type {
+    transform: rotate(45deg);
+    bottom: -2px;
+  }
+
+  .hamburger-menu.opened span:nth-last-of-type(2) {
+    display: none;
+  }
+
+  .hamburger-menu.opened span:last-of-type {
+    transform: rotate(-45deg);
+    top: 0px;
+  }
+
+  .navbar-container {
+    position: absolute;
+    top: 50px;
+    width: 100%;
+    left: 0;
+    display: none;
+    background-color: var(--dark-grey-color);
+    animation: fadeSlideOutTop 0.5s ease;
+
+  }
+
+  .navbar-container.show-menu {
+    display: block;
+    animation: fadeSlideInTop 0.5s ease;
+  }
+
+  nav {
+    flex-direction: column;
+    margin-bottom: 30px;
+  }
+
+  nav ul {
+    flex-direction: column;
+    margin-bottom: 0;
+  }
+
+  nav ul li {
+    text-align: center;
+  }
+}
+
+@keyframes fadeSlideInTop {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  60% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeSlideOutTop {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}