initial commit

resources/js/@core/scss/template/placeholders/_default-layout-vertical-nav.scss

@@ -0,0 +1,11 @@
+@use "vuetify/lib/styles/tools/elevation" as elevation;
+@use "@configured-variables" as variables;
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.5rem;
+
+    @include elevation.elevation(4);
+  }
+}

resources/js/@core/scss/template/placeholders/_index.scss

@@ -0,0 +1,3 @@
+@forward "vertical-nav";
+@forward "nav";
+@forward "default-layout-vertical-nav";

resources/js/@core/scss/template/placeholders/_nav.scss

@@ -0,0 +1,33 @@
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+
+/*
+    Active nav link styles for horizontal & vertical nav
+
+    For horizontal nav it will be only applied to top level nav items
+    For vertical nav it will be only applied to nav links (not nav groups)
+*/
+%nav-link-active {
+  --v-activated-opacity: 0.16;
+
+  background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
+  box-shadow: none;
+  color: rgb(var(--v-theme-primary));
+}
+
+// style for vertical nav nested icon
+%nav-link-nested-active {
+  background-color: transparent !important;
+  box-shadow: none;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+  font-weight: 600;
+
+  // style for nested dot icon
+  .nav-item-icon {
+    color: rgb(var(--v-global-theme-primary)) !important;
+    filter: drop-shadow(rgb(var(--v-global-theme-primary)) 0 0 2px);
+    transform: scale(1.2);
+  }
+}

resources/js/@core/scss/template/placeholders/_vertical-nav.scss

@@ -0,0 +1,21 @@
+// Open & Active nav group styles
+%vertical-nav-group-active {
+  --v-theme-overlay-multiplier: 2;
+
+  color: rgb(var(--v-global-theme-primary));
+
+  &:hover {
+    --v-theme-overlay-multiplier: 4;
+  }
+}
+
+// nav-group and nav-link border radius
+%vertical-nav-item-interactive {
+  border-radius: 0.375rem;
+  margin-block-end: 0.125rem;
+}
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  transition: transform 0.25s ease-in-out 0s;
+}