feat: burger menu

assets/sass/header.scss

@@ -44,3 +44,175 @@ $header-height: 6rem;
         line-height: 2rem;
     }
 }
+
+
+.burger-menu {
+    display: none;
+    height: 5rem;
+    width: 5rem;
+    position: relative;
+    bottom: -50%;
+    margin-right: 2em;
+    z-index: 200;
+
+    .checkbox {
+        display: none;
+    }
+
+    .burger-button {
+        position: absolute;
+        display: block;
+        min-width: initial;
+        background-color: white;
+        height: 5rem;
+        width: 5rem;
+        padding: 1rem 1rem;
+        border-radius: 50%;
+        box-shadow: 0 0rem 3.5rem rgba(0, 0, 0, 0.4);
+        text-align: center; 
+        cursor: pointer;
+        z-index: 1200;
+        user-select: none;
+    }
+
+    .background {
+        position: absolute;
+        height: 4rem;
+        width: 4rem;
+        margin: .5rem;
+        border-radius: 50%;
+        background-image: radial-gradient($background, black);
+        transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
+        z-index: 1000;
+    }
+
+    .nav {
+        display: none;
+        opacity: 0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+        width: 100%;
+        height: 100vh;
+        // transition: all 0.8s;
+
+        justify-content: center;
+        align-items: center;
+
+        font-size: 2rem;
+    }
+
+    .nav ul {
+        list-style-type: none;
+        padding: 0;
+        position: relative;
+        left: -1rem;
+
+        li {
+            margin-bottom: 1.5rem;
+        }
+
+        li a {
+            text-transform: uppercase;
+            text-decoration: none;
+        }
+    }
+
+    /* functionality */
+    .checkbox:checked ~ .background {
+        transform: scale(41);
+    }
+
+    @keyframes navin {
+        0% {
+            opacity: 0;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .checkbox:checked ~ .nav {
+        display: flex;
+        width: 100%;
+        opacity: 1;
+        // transition: opacity 0.8s ease-in-out;
+        animation: navin 1s ease-in-out;
+    }
+
+    /*  */
+    /* styling hamb ICON */
+    .icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .icon,
+    .icon::before,
+    .icon::after {
+        width: 3rem;
+        height: 2px;
+        background-color: gray;
+        display: inline-block;
+    }
+
+    .icon::before,
+    .icon::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        transition: all 0.2s;
+    }
+
+    .icon::before {
+        top: -0.8rem;
+    }
+    .icon::after {
+        top: 0.8rem;
+    }
+
+    .burger-button:hover icon:before {
+        top: -1rem;
+    }
+    .burger-button:hover icon::after {
+        top: 1rem;
+    }
+
+    .checkbox:checked + .burger-button {
+        z-index: 2000;
+    }
+
+    .checkbox:checked + .burger-button .icon {
+        background-color: transparent;
+    }
+
+    .checkbox:checked + .burger-button .icon::before {
+        top: 0;
+        transform: rotate(135deg);
+    }
+    .checkbox:checked + .burger-button .icon::after {
+        top: 0;
+        transform: rotate(-135deg);
+    }
+}
+
+
+@media (max-width: $md-breakpoint) {
+    // still not supported in firefox in 2023! I can't believe it
+    body:has(.checkbox:checked) {
+        overflow: hidden;
+    }
+    .desktop-nav {
+        display: none;
+    }
+    .burger-menu {
+        display: block;
+    }
+}
+