init

themes/hugoplate/assets/scss/navigation.scss

@@ -0,0 +1,87 @@
+// navbar toggler
+input#nav-toggle:checked + label #show-button {
+  @apply hidden;
+}
+
+input#nav-toggle:checked + label #hide-button {
+  @apply block;
+}
+
+input#nav-toggle:checked ~ #nav-menu {
+  @apply block;
+}
+
+.header {
+  @apply bg-body  py-6;
+}
+
+// navbar items
+.navbar {
+  @apply relative flex flex-wrap items-center justify-between;
+}
+
+.navbar-brand {
+  @apply text-dark  text-xl font-semibold;
+  image {
+    @apply max-h-full max-w-full;
+  }
+}
+
+.navbar-nav {
+  @apply text-center lg:text-left;
+}
+
+// .nav-item {
+//   @apply mx-3;
+// }
+
+.nav-link {
+  @apply text-dark hover:text-primary   block p-3 cursor-pointer font-semibold transition lg:px-2 lg:py-3;
+}
+
+.nav-dropdown {
+  @apply mr-0;
+  & > svg {
+    @apply pointer-events-none;
+  }
+  &.active {
+    .nav-dropdown-list {
+      @apply block;
+    }
+  }
+}
+
+.nav-dropdown-list {
+  @apply bg-body  z-10 min-w-[180px] rounded p-4 shadow hidden lg:invisible lg:absolute lg:block lg:opacity-0;
+}
+
+.nav-dropdown-item {
+  @apply [&:not(:last-child)]:mb-2;
+}
+
+.nav-dropdown-link {
+  @apply text-dark hover:text-primary   block py-1 font-semibold transition;
+}
+
+//theme-switcher
+.theme-switcher {
+  @apply inline-flex;
+
+  label {
+    @apply bg-border relative inline-block h-4 w-6 cursor-pointer rounded-2xl lg:w-10;
+  }
+
+  input {
+    @apply absolute opacity-0;
+  }
+
+  span {
+    @apply bg-dark absolute -top-1 left-0 flex h-6 w-6 items-center justify-center rounded-full transition-all duration-300;
+  }
+
+  input:checked + label {
+    span {
+      @apply lg:left-4;
+    }
+  }
+}