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, 9 insertions, 24 deletions

diff --git a/src/components/atoms/icons/hamburger.module.scss b/src/components/atoms/icons/hamburger.module.scss
index 09e7e30..4fba4df 100644
--- a/src/components/atoms/icons/hamburger.module.scss
+++ b/src/components/atoms/icons/hamburger.module.scss
@@ -1,16 +1,21 @@
 @use "@styles/abstracts/functions" as fun;
 
-.icon {
-  display: block;
+.wrapper {
+  display: flex;
+  align-items: center;
   width: var(--icon-size, #{fun.convert-px(50)});
   height: var(--icon-size, #{fun.convert-px(50)});
   position: relative;
+}
 
+.icon {
   &,
   &::before,
   &::after {
     display: block;
     height: fun.convert-px(7);
+    width: 100%;
+    position: absolute;
     background: var(--color-primary-lighter);
     background-image: linear-gradient(
       to right,
@@ -25,33 +30,13 @@
   &::before,
   &::after {
     content: "";
-    position: absolute;
-    left: fun.convert-px(-1);
-    right: fun.convert-px(-1);
   }
 
   &::before {
-    bottom: fun.convert-px(15);
+    top: fun.convert-px(-15);
   }
 
   &::after {
-    top: fun.convert-px(15);
-  }
-
-  &--active {
-    background: transparent;
-    border: transparent;
-
-    &::before {
-      bottom: 0;
-      transform-origin: 50% 50%;
-      transform: rotate(45deg);
-    }
-
-    &::after {
-      top: 0;
-      transform-origin: 50% 50%;
-      transform: rotate(-45deg);
-    }
+    bottom: fun.convert-px(-15);
   }
 }