chore: add a Toolbar component

1 files changed, 61 insertions, 61 deletions

diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss
index 2aac85d..76af935 100644
--- a/src/components/organisms/toolbar/main-nav.module.scss
+++ b/src/components/organisms/toolbar/main-nav.module.scss
@@ -1,87 +1,87 @@
 @use "@styles/abstracts/functions" as fun;
 @use "@styles/abstracts/mixins" as mix;
 
-.modal {
+.item {
   @include mix.media("screen") {
-    @include mix.dimensions(null, "md") {
-      padding: var(--spacing-2xs);
-      background: var(--color-bg-secondary);
-      border-top: fun.convert-px(4) solid;
-      border-bottom: fun.convert-px(4) solid;
-      border-image: radial-gradient(
-          ellipse at top,
-          var(--color-primary-lighter) 20%,
-          var(--color-primary) 100%
-        )
-        1;
-      box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3)
-        fun.convert-px(-1) var(--color-shadow-dark);
-    }
-
-    @include mix.dimensions("sm", "md") {
-      border-left: fun.convert-px(4) solid;
-      border-right: fun.convert-px(4) solid;
-    }
-
     @include mix.dimensions("md") {
-      top: unset;
-    }
-  }
-}
-
-.modal__list {
-  display: flex;
+      .checkbox,
+      .label {
+        display: none;
+      }
 
-  @include mix.media("screen") {
-    @include mix.dimensions("sm", "md") {
-      flex-flow: column;
+      .modal {
+        position: relative;
+      }
     }
   }
-}
 
-.checkbox {
-  &:checked {
-    ~ .label .icon {
-      background: transparent;
-      border: transparent;
+  .modal {
+    @include mix.media("screen") {
+      @include mix.dimensions(null, "md") {
+        padding: var(--spacing-2xs);
+        background: var(--color-bg-secondary);
+        border-top: fun.convert-px(4) solid;
+        border-bottom: fun.convert-px(4) solid;
+        border-image: radial-gradient(
+            ellipse at top,
+            var(--color-primary-lighter) 20%,
+            var(--color-primary) 100%
+          )
+          1;
+        box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3)
+          fun.convert-px(-1) var(--color-shadow-dark);
+      }
 
-      &::before {
-        top: 0;
-        transform-origin: 50% 50%;
-        transform: rotate(-45deg);
+      @include mix.dimensions("sm", "md") {
+        border-left: fun.convert-px(4) solid;
+        border-right: fun.convert-px(4) solid;
       }
 
-      &::after {
-        bottom: 0;
-        transform-origin: 50% 50%;
-        transform: rotate(45deg);
+      @include mix.dimensions("md") {
+        top: unset;
       }
     }
   }
 
-  &:not(:checked) {
+  .modal__list {
+    display: flex;
+
     @include mix.media("screen") {
-      @include mix.dimensions("md") {
-        ~ .modal {
-          opacity: 1;
-          visibility: visible;
-          transform: none;
-        }
+      @include mix.dimensions("sm", "md") {
+        flex-flow: column;
       }
     }
   }
-}
 
-.item {
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      .checkbox,
-      .label {
-        display: none;
+  .checkbox {
+    &:checked {
+      ~ .label .icon {
+        background: transparent;
+        border: transparent;
+
+        &::before {
+          top: 0;
+          transform-origin: 50% 50%;
+          transform: rotate(-45deg);
+        }
+
+        &::after {
+          bottom: 0;
+          transform-origin: 50% 50%;
+          transform: rotate(45deg);
+        }
       }
+    }
 
-      .modal {
-        position: relative;
+    &:not(:checked) {
+      @include mix.media("screen") {
+        @include mix.dimensions("md") {
+          ~ .modal {
+            opacity: 1;
+            visibility: visible;
+            transform: none;
+          }
+        }
       }
     }
   }