first commit

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

@@ -0,0 +1,27 @@
+@use "@configured-variables" as variables;
+@use "misc";
+@use "@core-scss/base/mixins";
+
+%default-layout-horizontal-nav-navbar-and-nav-container {
+  @include mixins.elevation(3);
+
+  // ℹ️ 1000 is v-window z-index
+  z-index: 1001;
+  background-color: rgb(var(--v-theme-surface));
+
+  &.header-blur {
+    @extend %blurry-bg;
+  }
+}
+
+%default-layout-horizontal-nav-navbar {
+  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+%default-layout-horizontal-nav-nav {
+  padding-block: variables.$horizontal-nav-padding;
+}
+
+%default-layout-horizontal-nav-nav-items-list {
+  gap: variables.$horizontal-nav-top-level-items-gap;
+}

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

@@ -0,0 +1,46 @@
+@use "@configured-variables" as variables;
+@use "misc";
+@use "@core-scss/base/mixins";
+
+%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
+  background-color: rgb(var(--v-theme-surface));
+}
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  @include mixins.elevation(variables.$vertical-nav-navbar-elevation);
+
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.2rem;
+  }
+}
+
+%default-layout-vertical-nav-floating-navbar-overlay {
+  isolation: isolate;
+
+  &::after {
+    position: absolute;
+    z-index: -1;
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    /* stylelint-enable */
+    background:
+      linear-gradient(
+        180deg,
+        rgba(var(--v-theme-background), 70%) 44%,
+        rgba(var(--v-theme-background), 43%) 73%,
+        rgba(var(--v-theme-background), 0%)
+      );
+    background-repeat: repeat;
+    block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
+    content: "";
+    inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
+    inset-inline-end: 0;
+    inset-inline-start: 0;
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-mask: linear-gradient(black, black 18%, transparent 100%);
+    mask: linear-gradient(black, black 18%, transparent 100%);
+    /* stylelint-enable */
+  }
+}

resources/styles/@core/base/placeholders/_default-layout.scss

@@ -0,0 +1,3 @@
+%layout-navbar {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}

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

@@ -0,0 +1,99 @@
+@use "@layouts/styles/mixins" as layoutsMixins;
+@use "@core-scss/base/variables";
+@use "@layouts/styles/placeholders";
+@use "@core-scss/base/mixins";
+
+// Horizontal nav item styles (including nested)
+%horizontal-nav-item {
+  padding-block: 0.6rem;
+  padding-inline: 1rem;
+}
+
+// Top level horizontal nav item styles (`a` tag & group label)
+%horizontal-nav-top-level-item {
+  border-radius: 0.4rem;
+}
+
+%horizontal-nav-disabled {
+  opacity: var(--v-disabled-opacity);
+  pointer-events: none;
+}
+
+// Active styles for sub nav link
+%horizontal-nav-sub-nav-link-active {
+  background: rgba(var(--v-theme-primary), 0.1);
+  color: rgb(var(--v-theme-primary));
+}
+
+/*
+  ℹ️ This style is required when you don't provide any transition to horizontal nav items via themeConfig `themeConfig.horizontalNav.transition`
+  Also, you have to disable it if you are using transition
+*/
+// Popper content styles when it's hidden
+%horizontal-nav-popper-content-hidden {
+  // display: none;
+
+  // opacity: 0;
+  // pointer-events: none;
+  // transform: translateY(7px);
+  // transition: transform 0.25s ease-in-out, opacity 0.15s ease-in-out;
+}
+
+/*
+  ℹ️ This style is required when you don't provide any transition to horizontal nav items via themeConfig `themeConfig.horizontalNav.transition`
+  Also, you have to disable it if you are using transition
+*/
+// Popper content styles when it's shown
+%horizontal-nav-popper-content-visible {
+  // display: block;
+
+  // opacity: 1;
+  // pointer-events: auto;
+  // pointer-events: auto;
+  // transform: translateY(0);
+}
+
+// Horizontal nav item icon (Including sub nav items)
+%horizontal-nav-item-icon {
+  font-size: variables.$horizontal-nav-items-icon-size;
+  margin-inline-end: variables.$horizontal-nav-items-icon-margin-inline-end;
+}
+
+// Horizontal nav subitem
+%horizontal-nav-subitem {
+  min-inline-size: 12rem;
+
+  .nav-item-title {
+    margin-inline-end: 1rem;
+  }
+}
+
+// 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 {
+  font-size: variables.$horizontal-nav-third-level-icon-size;
+  margin-inline-end: 0.75rem;
+
+  /*
+    ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
+    (1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
+  */
+  margin-inline-start: calc((variables.$horizontal-nav-items-icon-size - variables.$horizontal-nav-third-level-icon-size) / 2);
+}
+
+// Horizontal nav item title
+%horizontal-nav-item-title {
+  margin-inline-end: 0.3rem;
+  white-space: nowrap;
+}
+
+// Popper content styles
+%horizontal-nav-popper-content {
+  @include mixins.elevation(4);
+
+  border-radius: 6px;
+  padding-block: 0.3rem;
+
+  > div {
+    @extend %style-scroll-bar;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,33 @@
+@use "@core-scss/base/mixins";
+
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+  .nav-item-title {
+    letter-spacing: 0.15px;
+  }
+
+  .nav-section-title {
+    letter-spacing: 0.4px;
+  }
+}
+
+/*
+    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 {
+  background-color: rgb(var(--v-global-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+
+  @include mixins.elevation(3);
+}
+
+%nav-link {
+  a {
+    color: inherit;
+  }
+}

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

@@ -0,0 +1,81 @@
+@use "@core-scss/base/mixins";
+@use "@configured-variables" as variables;
+@use "vuetify/lib/styles/tools/states" as vuetifyStates;
+
+%nav-header-action {
+  font-size: 1.25rem;
+}
+
+// Nav items styles (including section title)
+%vertical-nav-item {
+  margin-block: 0;
+  margin-inline: variables.$vertical-nav-horizontal-spacing;
+  padding-block: 0;
+  padding-inline: variables.$vertical-nav-horizontal-padding;
+  white-space: nowrap;
+}
+
+// This is same as `%vertical-nav-item` except section title is excluded
+%vertical-nav-item-interactive {
+  border-radius: 0.4rem;
+  block-size: 2.75rem;
+
+  /*
+    ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
+    With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
+  */
+  margin-block-end: 0.375rem;
+}
+
+// Common styles for nav item icon styles
+// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
+%vertical-nav-items-icon {
+  flex-shrink: 0;
+  font-size: variables.$vertical-nav-items-icon-size;
+  margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
+}
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  /*
+    ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
+    (1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
+  */
+  $vertical-nav-items-nested-icon-margin-inline: calc((variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2);
+
+  font-size: variables.$vertical-nav-items-nested-icon-size;
+  margin-inline-end: $vertical-nav-items-nested-icon-margin-inline + variables.$vertical-nav-items-icon-margin-inline-end;
+  margin-inline-start: $vertical-nav-items-nested-icon-margin-inline;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+  visibility: hidden;
+}
+
+// Open & Active nav group styles
+%vertical-nav-group-open-active {
+  @include mixins.selected-states("&::before");
+}
+
+// Section title
+%vertical-nav-section-title {
+  // ℹ️ Setting height will prevent jerking when text & icon is toggled
+  block-size: 1.5rem;
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+  display: inline-block;
+  border-radius: 1.5rem;
+  font-size: 0.8em;
+  font-weight: 500;
+  line-height: 1;
+  padding-block: 0.25em;
+  padding-inline: 0.55em;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+}