Feat/bottom navigation (#897)

* feat(bottom-navigation): ✨ Add bottom navigation component * docs(bottom-navigation): 📝 Add bottom navigation readme Co-authored-by: iman malekian <imanmalekian31@gmail.com>
saadeghi · Jun 25, 2022 · 0941fb3 · 0941fb3
1 parent 77fd3ab
commit 0941fb3
Show file tree

Hide file tree

Showing 3 changed files with 615 additions and 0 deletions.
diff --git a/src/components/styled/bottom-navigation.css b/src/components/styled/bottom-navigation.css
@@ -0,0 +1,116 @@
+.btm-nav,
+.btm-nav-sm,
+.btm-nav-md,
+.btm-nav-lg {
+  @apply flex flex-row items-center justify-around;
+  @apply fixed bottom-0 left-0 right-0;
+  @apply h-16 w-full;
+  @apply bg-base-100;
+
+  &.demo {
+    @apply relative;
+  }
+
+  &-lg {
+    @apply h-20;
+    @apply text-lg;
+    .btn-nav-title {
+      @apply text-sm;
+      @apply mt-2;
+    }
+  }
+  &-sm {
+    @apply h-12;
+    @apply text-sm;
+    .btn-nav-title {
+      @apply text-xs;
+    }
+  }
+
+  .btn-nav,
+  .btn-nav-boxed {
+    @apply flex items-center justify-center flex-col basis-full;
+    @apply h-full;
+    @apply cursor-pointer;
+    @apply border-solid;
+    @apply text-base;
+    @apply relative;
+    border-bottom-color: transparent !important;
+
+    &-title {
+      @apply text-xs;
+      @apply mt-1;
+    }
+
+    &:hover:not(.btn-nav-active) {
+      @apply bg-base-200;
+    }
+
+    /* default */
+    & {
+      @apply text-neutral;
+      @apply border-neutral;
+    }
+
+    /* brand colors */
+    &-primary {
+      @apply border-primary;
+      &:hover,
+      &.btn-nav-active {
+        @apply text-primary;
+      }
+    }
+    &-secondary {
+      @apply border-secondary;
+      &:hover,
+      &.btn-nav-active {
+        @apply text-secondary;
+      }
+    }
+    &-accent {
+      @apply border-accent;
+      &:hover,
+      &.btn-nav-active {
+        @apply text-accent;
+      }
+    }
+
+    /* state colors */
+    &-info {
+      @apply border-info;
+      &:hover,
+      &.btn-nav-active {
+        @apply text-info;
+      }
+    }
+    &-success {
+      @apply border-success;
+      &:hover,
+      &.btn-nav-active {
+        @apply text-success;
+      }
+    }
+    &-warning {
+      @apply border-warning;
+      &:hover,
+      &.btn-nav-active {
+        @apply text-warning;
+      }
+    }
+    &-error {
+      @apply border-error;
+      &:hover,
+      &.btn-nav-active {
+        @apply text-error;
+      }
+    }
+
+    /* disabled */
+    &-disabled,
+    &-disabled:hover,
+    &[disabled],
+    &[disabled]:hover {
+      @apply border-opacity-0 bg-neutral bg-opacity-20 text-base-content text-opacity-20;
+    }
+  }
+}
diff --git a/src/components/unstyled/bottom-navigation.css b/src/components/unstyled/bottom-navigation.css
@@ -0,0 +1,89 @@
+.btm-nav,
+.btm-nav-sm,
+.btm-nav-md,
+.btm-nav-lg {
+  box-shadow: 0 2px 4px -1px #00000033, 0 4px 5px 0 #00000024, 0 1px 10px 0 #0000001f;
+
+  .btn-nav {
+    &-boxed {
+      &.btn-nav-active {
+        & {
+          @apply bg-neutral text-neutral-content;
+        }
+        &.btn-nav-primary {
+          @apply bg-primary text-primary-content;
+        }
+        &.btn-nav-secondary {
+          @apply bg-secondary text-secondary-content;
+        }
+        &.btn-nav-accent {
+          @apply bg-accent text-accent-content;
+        }
+        &.btn-nav-info {
+          @apply bg-info text-info-content;
+        }
+        &.btn-nav-success {
+          @apply bg-success text-success-content;
+        }
+        &.btn-nav-warning {
+          @apply bg-warning text-warning-content;
+        }
+        &.btn-nav-error {
+          @apply bg-error text-error-content;
+        }
+      }
+    }
+  }
+
+  .btn-nav {
+    &-active:not(.btn-nav-boxed) {
+      --btn-border-width: 0.25rem;
+      animation: btm-nav 0.1s ease-in-out forwards;
+    }
+
+    /* disabled */
+    &-disabled,
+    &[disabled] {
+      @apply pointer-events-none;
+    }
+  }
+  &-lg {
+    .btn-nav {
+      &-active {
+        --btn-border-width: 0.3125rem;
+        animation: btm-nav 0.1s ease-in-out forwards;
+      }
+
+      /* disabled */
+      &-disabled,
+      &[disabled] {
+        @apply pointer-events-none;
+      }
+    }
+  }
+  &-sm {
+    .btn-nav {
+      &-active {
+        --btn-border-width: 0.1875rem;
+        animation: btm-nav 0.1s ease-in-out forwards;
+      }
+
+      /* disabled */
+      &-disabled,
+      &[disabled] {
+        @apply pointer-events-none;
+      }
+    }
+  }
+}
+
+@keyframes btm-nav {
+  0% {
+    border-top-width: 0px;
+    border-bottom-width: 0px;
+  }
+  100% {
+    border-top-width: var(--btn-border-width, 0.25rem);
+    border-bottom-width: var(--btn-border-width, 0.25rem);
+  }
+}