first commit

resources/styles/@core/template/placeholders/_default-layout-horizontal-nav.scss

@@ -0,0 +1,9 @@
+@use 'misc';
+
+%default-layout-horizontal-nav-navbar-and-nav-container {
+  box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
+
+  &.header-blur {
+    @extend %blurry-bg;
+  }
+}

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

@@ -0,0 +1,11 @@
+@use "@configured-variables" as variables;
+@use "@core-scss/base/mixins";
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
+
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.5rem;
+  }
+}

resources/styles/@core/template/placeholders/_horizontal-nav.scss

@@ -0,0 +1,36 @@
+@use "@core-scss/base/mixins";
+
+// Add border radius to top level nav item
+%horizontal-nav-top-level-item {
+  border-radius: 3.125rem !important;
+}
+
+// Horizontal nav item styles (including nested)
+%horizontal-nav-item {
+  padding-block: 0.5rem;
+}
+
+// Horizontal nav item title
+%horizontal-nav-item-title {
+  margin-inline-end: 0.5rem;
+}
+
+// Popper content styles
+%horizontal-nav-popper-content {
+  @include mixins.elevation(8);
+}
+
+
+// Styles for third level item icon/ (e.g. Reduce the icon's size of nested group's nav links (Top level group > Sub group > [Nav links]))
+%third-level-nav-item-icon {
+  color:rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))
+}
+
+
+// Active styles for sub nav link
+%horizontal-nav-sub-nav-link-active {
+  background: rgba(var(--v-theme-primary), 0.16);
+  color: rgb(var(--v-theme-primary));
+
+  i { color: rgb(var(--v-theme-primary)) !important;}
+}

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

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

resources/styles/@core/template/placeholders/_misc.scss

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

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

@@ -0,0 +1,17 @@
+@use "@core-scss/base/mixins";
+
+%nav-link-active {
+  background: linear-gradient(-72.47deg, rgb(var(--v-global-theme-primary)) 22.16%,
+  rgba(var(--v-global-theme-primary), 0.7) 76.47%) !important;
+
+  i { color: rgb(var(--v-theme-on-primary)) !important; }
+
+  @include mixins.elevation(4);
+}
+
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  .nav-item-title {
+    line-height: 1.375rem;
+  }
+}

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

@@ -0,0 +1,93 @@
+@use "@configured-variables" as variables;
+
+%nav-header-action {
+  color:rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+
+// ℹ️ Add divider around section title
+%vertical-nav-section-title {
+  block-size: 2rem;
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+
+  /*
+    ℹ️ We will use this to add gap between divider and text.
+    Moreover, we will use this to adjust the `flex-basis` property of left divider
+  */
+  $divider-gap: 0.625rem;
+
+  // Thanks: https://stackoverflow.com/a/62359101/10796681
+  .title-text {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-start;
+    column-gap: $divider-gap;
+
+    &::before,
+    &::after {
+      border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+      content: "";
+    }
+
+    &::after {
+      flex: 1 1 auto;
+    }
+
+    &::before {
+      flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
+      margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
+    }
+  }
+
+  // ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
+  @at-root {
+    .layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
+      margin-inline: 4px 0;
+    }
+  }
+}
+
+%vertical-nav-item-interactive {
+  // Add pill shape styles
+  block-size: 2.375rem !important;
+  border-end-end-radius: 3.125rem !important;
+  border-end-start-radius: 0 !important;
+  border-start-end-radius: 3.125rem !important;
+  border-start-start-radius: 0 !important;
+
+  // ℹ️ Wobble effect
+  transition: margin-inline 0.15s ease-in-out;
+  will-change: margin-inline;
+
+  // Reduce margin inline end when vertical nav is in collapsed mode and not hovered
+  .layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) & {
+    margin-inline: 0 5px;
+  }
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+  font-size: .8125rem;
+  line-height: 20px;
+  padding-block: 0.125rem;
+  padding-inline: 0.75rem;
+}
+
+// Nav items styles (including section title)
+%vertical-nav-item {
+  gap: .5rem;
+  padding-block: 0.4375rem;
+}
+
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  margin-inline: .375rem;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+  margin-inline-start: 1rem;
+  visibility: visible;
+}