css only menu

src/sass/css/style.scss

@@ -158,18 +158,121 @@ h4 {
 
 .topbar {
     display: flex;
+    height: 57px;
     flex-wrap: wrap;
     align-items: center;
     text-align: left;
     background: $color__ternary;
+    z-index: 1;
+
+    @media screen and (min-width: 1080px) and (max-resolution: 1x) {
+        position: sticky;
+        top: 0;
+    }
 
     a {
         padding-left: 20px;
     }
 }
 
+/* Sidenav TEST
+    ------------------------------------------------------------------------ */
+
+.menuToggle {
+    display: block;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1;
+}
+
+.menuToggle a {
+    transition: color 0.3s ease;
+}
+
+.menuToggle input {
+    display: block;
+    width: 40px;
+    height: 32px;
+    position: absolute;
+    top: -7px;
+    left: -5px;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 2;
+}
+
+.menuToggle span {
+    display: block;
+    width: 33px;
+    height: 4px;
+    margin-bottom: 5px;
+    position: relative;
+    background: #cdcdcd;
+    border-radius: 3px;
+    z-index: 1;
+    transform-origin: 4px 0px;
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+        opacity 0.55s ease;
+}
+
+.menuToggle span:first-child {
+    transform-origin: 0% 0%;
+}
+
+.menuToggle span:nth-last-child(2) {
+    transform-origin: 0% 100%;
+}
+
+.menuToggle input:checked~span {
+    opacity: 1;
+    transform: rotate(45deg) translate(-2px, -1px);
+    background: #ffffff;
+}
+
+.menuToggle input:checked~span:nth-last-child(3) {
+    opacity: 0;
+    transform: rotate(0deg) scale(0.2, 0.2);
+}
+
+.menuToggle input:checked~span:nth-last-child(2) {
+    transform: rotate(-45deg) translate(0, -1px);
+}
+
+.menu {
+    position: fixed;
+    margin-top: 0;
+    padding-top: 100px;
+    top: 0;
+    right: 0;
+    width: fit-content;
+    max-width: 100%;
+    height: 100%;
+    background: $color__neutral;
+    box-shadow: 0 0 20px $color__neutral;
+    list-style-type: none;
+    transform: translate(100%, 0);
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
+}
+
+.menu li {
+    padding-right: 20px;
+    padding-bottom: 50px;
+    font-size: 22px;
+}
+
+.menu li label {
+    cursor: pointer;
+}
+
+.menuToggle input:checked~ul {
+    transform: none;
+}
+
 /* Sidenav
     ------------------------------------------------------------------------ */
+
 .menu_icon_sidenav {
     z-index: 2;
     width: fit-content;
@@ -249,7 +352,7 @@ h4 {
 }
 
 .active_sidenav {
-    right: 0px;
+    right: 0;
     pointer-events: fill;
     position: fixed;
     top: 0;
@@ -264,14 +367,6 @@ h4 {
     height: 20px;
 }
 
-.gap__40 {
-    height: 40px;
-}
-
-.gap__80 {
-    height: 80px;
-}
-
 /* Boxes
     ------------------------------------------------------------------------ */
 
@@ -540,6 +635,12 @@ svg {
     margin-top: 0;
     padding-top: 20px;
     padding-bottom: 20px;
+
+    @media screen and (min-width: 1080px) and (max-resolution: 1x) {
+        position: sticky;
+        top: 57px;
+    }
+
 }
 
 /* Responsive 1080px
@@ -581,11 +682,6 @@ svg {
         align-items: normal;
     }
 
-    .sticky {
-        position: sticky;
-        top: 0;
-    }
-
 }
 
 /* Responsive 1200px