add of responsive design

src/components/Header/Header.module.css

@@ -11,14 +11,48 @@
     padding: 0.8rem;
     height: fit-content;
     z-index: 2;
+    position: relative;
+    justify-content: space-between;
 }
 
 
-.headerContent {
+
+.activeHeaderContent {
     display: flex;
     justify-content: space-between;
     width: 100%;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+    pointer-events: auto;
 }
+.inactiveHeaderContent{
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    position: absolute;
+    top: 0.8rem;
+    left: 0.8rem;
+}
+
+
+.inactiveMobileMenu{
+    max-height: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+}
+
+.activeMobileMenu{
+    transition: max-height 3s ease;
+    max-height: 500px;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 0.5rem;
+}
+
+
+
 
 .headerLeftContent {
     display: flex;
@@ -32,18 +66,24 @@
     width: fit-content;
     display: flex;
     align-items: center;
-    gap: 1rem;
 }
 
 .logo {
     height: 4rem;
     width: auto;
+    flex-shrink: 0;
 }
 
-.logoLink{
+.logoLink {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: fit-content;
+    height: fit-content;
+    flex-shrink: 0;
 }
 
+
 .link {
     color: #000000;
     width: fit-content;
@@ -65,17 +105,10 @@
     border-bottom: 2px solid #019AFF;
 }
 
-
-
-
-
 svg {
     width: fit-content;
 }
 
-
-
-
 .bellBtn, .profileLink {
     display: flex;
     align-items: center;
@@ -122,8 +155,6 @@ svg {
 }
 
 
-
-
 .profileLink:hover {
     transform: translateY(-4px);
     background: rgba(191, 191, 191, 0.5);
@@ -132,8 +163,6 @@ svg {
     }
 }
 
-
-
 .bellBtn svg {
     height: 28px;
 }
@@ -142,9 +171,6 @@ svg {
     height: 40px;
 }
 
-
-
-
 .notificationDiv {
     position: absolute;
     width: 250px;
@@ -166,6 +192,8 @@ svg {
 .notification{
     margin-bottom: 7%;
     display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .notificationBadge {
@@ -195,3 +223,50 @@ svg {
 .closeBtn:focus-visible {
     outline: 2px solid black;
 }
+
+.burgerBtn {
+    flex-direction: column;
+    justify-content: space-between;
+    width: 30px;
+    height: 22px;
+    border: none;
+    cursor: pointer;
+    display: none;
+    z-index: 10;
+}
+
+.burgerBar {
+    width: 100%;
+    height: 3px;
+    background-color: #000000;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.activeBurgerBtn .burgerBar:nth-child(1) {
+    transform: translateY(10px) rotate(45deg);
+}
+.activeBurgerBtn .burgerBar:nth-child(2) {
+    opacity: 0;
+}
+.activeBurgerBtn .burgerBar:nth-child(3) {
+    transform: translateY(-9px) rotate(-45deg);
+}
+
+
+.navLinks{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+
+
+@media screen and (max-width: 768px) {
+    .navLinks {
+        display: none;
+    }
+    .burgerBtn {
+        display: flex;
+    }
+}