init

javascript-version/@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);
+  }
+}

javascript-version/@core/scss/template/placeholders/_index.scss

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

javascript-version/@core/scss/template/placeholders/_misc.scss

@@ -0,0 +1,7 @@
+%blurry-bg {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  /* stylelint-enable */
+  background-color: rgb(var(--v-theme-surface), 0.88);
+}

javascript-version/@core/scss/template/placeholders/_nav.scss

@@ -0,0 +1,45 @@
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  .nav-item-title {
+    letter-spacing: normal;
+    line-height: 1.375rem;
+  }
+}
+
+/*
+    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;
+
+  // style for nested dot icon
+  .nav-item-icon {
+    color: rgb(var(--v-theme-primary), var(--v-activated-opacity)) !important;
+    transform: scale(2.6662);
+
+    &::before {
+      position: absolute;
+      border-radius: 6px;
+      background-color: rgb(var(--v-theme-primary));
+      block-size: 100%;
+      content: "";
+      inline-size: 100%;
+      inset: 0;
+      transform: scale(-0.5);
+    }
+  }
+}

javascript-version/@core/scss/template/placeholders/_vertical-nav.scss

@@ -0,0 +1,57 @@
+// Open & Active nav group styles
+%vertical-nav-group-active {
+  --v-theme-overlay-multiplier: 2;
+
+  color: rgb(var(--v-theme-primary));
+}
+
+%nav-header-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(var(--v-theme-primary));
+  block-size: 1.375rem;
+  inline-size: 1.375rem;
+}
+
+// nav-group and nav-link border radius
+%vertical-nav-item-interactive {
+  border-radius: 0.375rem;
+  block-size: 2.625rem;
+  margin-block-end: 0.25rem;
+}
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  margin-inline: 6px 20px;
+  transition: transform 0.25s ease-in-out 0s;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+  margin-inline-start: 14px;
+  visibility: visible;
+}
+
+%vertical-nav-section-title {
+  block-size: 1.125rem;
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  text-transform: uppercase;
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 500px;
+  block-size: 1.5rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  margin-inline-end: 0.5rem;
+  padding-block: 0;
+  padding-inline: 0.625rem;
+}