chore: add a MainNavButton component

I also move the active state from the hamburger to this pseudo-button.
It makes more sense that the button handles the icon shape.

1 files changed, 37 insertions, 0 deletions

diff --git a/src/components/molecules/buttons/main-nav-button.module.scss b/src/components/molecules/buttons/main-nav-button.module.scss
new file mode 100644
index 0000000..bc1ed19
--- /dev/null
+++ b/src/components/molecules/buttons/main-nav-button.module.scss
@@ -0,0 +1,37 @@
+@use "@styles/abstracts/functions" as fun;
+
+.checkbox {
+  position: absolute;
+  top: calc(#{fun.convert-px(50)} / 2);
+  left: calc(#{fun.convert-px(50)} / 2);
+  opacity: 0;
+  cursor: pointer;
+}
+
+.label {
+  display: block;
+  cursor: pointer;
+
+  .icon {
+    &__wrapper {
+      --icon-size: #{fun.convert-px(50)};
+    }
+
+    &--active {
+      background: transparent;
+      border: transparent;
+
+      &::before {
+        top: 0;
+        transform-origin: 50% 50%;
+        transform: rotate(-45deg);
+      }
+
+      &::after {
+        bottom: 0;
+        transform-origin: 50% 50%;
+        transform: rotate(45deg);
+      }
+    }
+  }
+}