initial commit

2024-10-25 01:02:11 +05:00
commit 6e65bc3a62
1710 changed files with 273609 additions and 0 deletions
--- a/resources/styles/@core/template/_vertical-nav.scss
+++ b/resources/styles/@core/template/_vertical-nav.scss
@@ -0,0 +1,103 @@
+@use "@core-scss/template/placeholders" as *;
+@use "vuetify/lib/styles/tools/elevation" as elevation;
+@use "@configured-variables" as variables;
+
+$divider-gap: 0.75rem;
+
+// vertical nav app title
+.layout-nav-type-vertical {
+  .layout-vertical-nav {
+    @include elevation.elevation(3);
+
+    // 👉 Nav header
+    .nav-header {
+      margin-block-start: variables.$vertical-nav-header-margin-top;
+
+      .app-title-wrapper {
+        h1 {
+          font-size: 28px;
+        }
+      }
+    }
+
+    .nav-items {
+      padding-block-start: 0.25rem;
+
+      // ℹ️ Reduce with width of the thumb in vertical nav menu so we can clearly see active indicator
+      .ps__thumb-y {
+        inline-size: 0.125rem;
+      }
+
+      .ps__rail-y.ps--clicking .ps__thumb-y,
+      .ps__rail-y:focus > .ps__thumb-y,
+      .ps__rail-y:hover > .ps__thumb-y {
+        inline-size: 0.375rem;
+      }
+    }
+
+    // nav-section-title's line
+    .title-text {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-start;
+      column-gap: $divider-gap;
+
+      &::before {
+        flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
+        border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+        content: "";
+        margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
+      }
+    }
+
+    // Active status indicator
+    .nav-link .router-link-exact-active,
+    .nav-group.active:not(.nav-group .nav-group) > :first-child {
+      &::after {
+        position: absolute;
+        background-color: rgb(var(--v-global-theme-primary));
+        block-size: 2.625rem;
+        border-end-start-radius: 0.375rem;
+        border-start-start-radius: 0.375rem;
+        content: "";
+        inline-size: 0.25rem;
+        inset-inline-end: - variables.$vertical-nav-horizontal-spacing;
+      }
+    }
+
+    // 👉 Vertical nav link
+    .nav-group {
+      .nav-link {
+        > .router-link-exact-active {
+          @extend %nav-link-nested-active;
+
+          // active status indicator removed
+          &::after {
+            content: none;
+          }
+        }
+      }
+
+      // Active & open states for nav group label
+      &.open:not(.active),
+      .nav-group.active {
+        > :first-child {
+          &.nav-group-label {
+            svg,
+            .nav-item-title {
+              color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+            }
+          }
+        }
+      }
+
+      // nav-group active
+      &.active:not(.nav-group .nav-group) {
+        > :first-child {
+          @extend %vertical-nav-group-active;
+        }
+      }
+    }
+  }
+}