feat: add navbar

Author: ayeo127

packages/panda-san/.stylelintrc.json

@@ -4,6 +4,10 @@
   ],
   "extends": "stylelint-config-sass-guidelines",
   "rules": {
-    "max-nesting-depth": 2
+    "max-nesting-depth": 3,
+    "order/order": [
+      "custom-properties",
+      "declarations"
+    ]
   }
 }

packages/panda-san/src/index.scss

@@ -2,3 +2,4 @@
 @import 'mixins/index';
 @import 'core/index';
 @import 'layout/index';
+@import 'navbar/index';

packages/panda-san/src/navbar/index.scss

@@ -0,0 +1 @@
+@import 'navbar';

packages/panda-san/src/navbar/navbar.scss

@@ -0,0 +1,86 @@
+.navbar {
+  align-items: center;
+  background-color: $navbar-color;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+  z-index: $stack-sticky;
+
+  &__brand {
+    display: flex;
+    flex: 1;
+  }
+
+  &__burger {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+
+    button {
+      background: none;
+      border: 0;
+    }
+  }
+
+  &__menu {
+    display: none;
+
+    &--active {
+      background-color: $navbar-menu-color;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+  }
+
+  &__item {
+    align-items: center;
+    color: $link-color;
+    display: flex;
+    height: px-to-rem(36px);
+    justify-content: flex-start;
+    text-decoration: none;
+    width: 100%;
+
+    &:hover,
+    &:focus {
+      background-color: darken($navbar-menu-color, 10%);
+    }
+  }
+
+  @each $breakpoint-name, $gutter in $container-gutters {
+    @include breakpoint($breakpoint-name) {
+      padding: $gutter $gutter;
+    }
+  }
+
+  @include breakpoint(tablet) {
+    &__burger {
+      display: none;
+    }
+
+    &__menu,
+    &__menu--active {
+      background-color: transparent;
+      display: flex;
+      flex: 2;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+
+    &__item {
+      justify-content: center;
+      width: fit-content;
+
+      & + & {
+        margin-left: px-to-rem(51px);
+      }
+
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
+    }
+  }
+}