init

typescript-version/@layouts/components/TransitionExpand.vue

@@ -0,0 +1,92 @@
+<!-- Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/ -->
+
+<script lang="ts">
+import { Transition } from 'vue'
+
+export default defineComponent({
+  name: 'TransitionExpand',
+  setup(_, { slots }) {
+    const onEnter = (element: HTMLElement) => {
+      const width = getComputedStyle(element).width
+
+      element.style.width = width
+      element.style.position = 'absolute'
+      element.style.visibility = 'hidden'
+      element.style.height = 'auto'
+
+      const height = getComputedStyle(element).height
+
+      element.style.width = ''
+      element.style.position = ''
+      element.style.visibility = ''
+      element.style.height = '0px'
+
+      // Force repaint to make sure the
+      // animation is triggered correctly.
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height
+
+      // Trigger the animation.
+      // We use `requestAnimationFrame` because we need
+      // to make sure the browser has finished
+      // painting after setting the `height`
+      // to `0` in the line above.
+      requestAnimationFrame(() => {
+        element.style.height = height
+      })
+    }
+
+    const onAfterEnter = (element: HTMLElement) => {
+      element.style.height = 'auto'
+    }
+
+    const onLeave = (element: HTMLElement) => {
+      const height = getComputedStyle(element).height
+
+      element.style.height = height
+
+      // Force repaint to make sure the
+      // animation is triggered correctly.
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height
+
+      requestAnimationFrame(() => {
+        element.style.height = '0px'
+      })
+    }
+
+    return () => h(
+      h(Transition),
+      {
+        name: 'expand',
+        onEnter,
+        onAfterEnter,
+        onLeave,
+      },
+      () => slots.default?.(),
+    )
+  },
+})
+</script>
+
+<style>
+.expand-enter-active,
+.expand-leave-active {
+  overflow: hidden;
+  transition: block-size var(--expand-transition-duration, 0.25s) ease;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  block-size: 0;
+}
+</style>
+
+<style scoped>
+* {
+  backface-visibility: hidden;
+  perspective: 1000px;
+  transform: translateZ(0);
+  will-change: block-size;
+}
+</style>

typescript-version/@layouts/components/VerticalNav.vue

@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { Component } from 'vue'
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
+import { useDisplay } from 'vuetify'
+import logo from '@images/logo.svg?raw'
+
+interface Props {
+  tag?: string | Component
+  isOverlayNavActive: boolean
+  toggleIsOverlayNavActive: (value: boolean) => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: 'aside',
+})
+
+const { mdAndDown } = useDisplay()
+
+const refNav = ref()
+
+/*
+  ℹ️ Close overlay side when route is changed
+  Close overlay vertical nav when link is clicked
+*/
+const route = useRoute()
+
+watch(
+  () => route.path,
+  () => {
+    props.toggleIsOverlayNavActive(false)
+  })
+
+const isVerticalNavScrolled = ref(false)
+const updateIsVerticalNavScrolled = (val: boolean) => isVerticalNavScrolled.value = val
+
+const handleNavScroll = (evt: Event) => {
+  isVerticalNavScrolled.value = (evt.target as HTMLElement).scrollTop > 0
+}
+</script>
+
+<template>
+  <Component
+    :is="props.tag"
+    ref="refNav"
+    class="layout-vertical-nav"
+    :class="[
+      {
+        'visible': isOverlayNavActive,
+        'scrolled': isVerticalNavScrolled,
+        'overlay-nav': mdAndDown,
+      },
+    ]"
+  >
+    <!-- 👉 Header -->
+    <div class="nav-header">
+      <slot name="nav-header">
+        <NuxtLink
+          to="/"
+          class="app-logo app-title-wrapper"
+        >
+          <div
+            class="d-flex"
+            v-html="logo"
+          />
+
+          <h1 class="leading-normal">
+            sneat
+          </h1>
+        </NuxtLink>
+      </slot>
+    </div>
+    <slot name="before-nav-items">
+      <div class="vertical-nav-items-shadow" />
+    </slot>
+    <slot
+      name="nav-items"
+      :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled"
+    >
+      <PerfectScrollbar
+        tag="ul"
+        class="nav-items"
+        :options="{ wheelPropagation: false }"
+        @ps-scroll-y="handleNavScroll"
+      >
+        <slot />
+      </PerfectScrollbar>
+    </slot>
+    <slot name="after-nav-items" />
+  </Component>
+</template>
+
+<style lang="scss" scoped>
+.app-logo {
+  display: flex;
+  align-items: center;
+  column-gap: 0.75rem;
+
+  .app-logo-title {
+    font-size: 1.25rem;
+    font-weight: 500;
+    line-height: 1.75rem;
+    text-transform: uppercase;
+  }
+}
+</style>
+
+<style lang="scss">
+@use "@configured-variables" as variables;
+@use "@layouts/styles/mixins";
+
+// 👉 Vertical Nav
+.layout-vertical-nav {
+  position: fixed;
+  z-index: variables.$layout-vertical-nav-z-index;
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  inline-size: variables.$layout-vertical-nav-width;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  transition: inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+  will-change: transform, inline-size;
+
+  .nav-header {
+    display: flex;
+    align-items: center;
+
+    .header-action {
+      cursor: pointer;
+
+      @at-root {
+        #{variables.$selector-vertical-nav-mini} .nav-header .header-action {
+          &.nav-pin,
+          &.nav-unpin {
+            display: none !important;
+          }
+        }
+      }
+    }
+  }
+
+  .app-title-wrapper {
+    margin-inline-end: auto;
+  }
+
+  .nav-items {
+    block-size: 100%;
+
+    // ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
+    // overflow-x: hidden;
+
+    // // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
+    // overflow-y: auto;
+  }
+
+  .nav-item-title {
+    overflow: hidden;
+    margin-inline-end: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // 👉 Collapsed
+  .layout-vertical-nav-collapsed & {
+    &:not(.hovered) {
+      inline-size: variables.$layout-vertical-nav-collapsed-width;
+    }
+  }
+}
+
+// Small screen vertical nav transition
+@media (max-width: 1279px) {
+  .layout-vertical-nav {
+    &:not(.visible) {
+      transform: translateX(-#{variables.$layout-vertical-nav-width});
+
+      @include mixins.rtl {
+        transform: translateX(variables.$layout-vertical-nav-width);
+      }
+    }
+
+    transition: transform 0.25s ease-in-out;
+  }
+}
+</style>

typescript-version/@layouts/components/VerticalNavGroup.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import type { NavGroup } from '@layouts/types'
+
+defineProps<{
+  item: Omit<NavGroup, 'children'>
+}>()
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <li
+    class="nav-group"
+    :class="isOpen && 'open'"
+  >
+    <div
+      class="nav-group-label"
+      @click="isOpen = !isOpen"
+    >
+      <VIcon
+        :icon="item.icon || 'bxs-circle'"
+        class="nav-item-icon"
+      />
+      <span class="nav-item-title">{{ item.title }}</span>
+      <span
+        class="nav-item-badge"
+        :class="item.badgeClass"
+      >
+        {{ item.badgeContent }}
+      </span>
+      <VIcon
+        icon="bx-chevron-right"
+        class="nav-group-arrow"
+      />
+    </div>
+    <div class="nav-group-children-wrapper">
+      <ul class="nav-group-children">
+        <slot />
+      </ul>
+    </div>
+  </li>
+</template>
+
+<style lang="scss">
+.layout-vertical-nav {
+  .nav-group {
+    &-label {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .nav-group-children-wrapper {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 0.3s ease-in-out;
+
+      .nav-group-children {
+        overflow: hidden;
+      }
+    }
+
+    &.open {
+      .nav-group-children-wrapper {
+        grid-template-rows: 1fr;
+      }
+    }
+  }
+}
+</style>

typescript-version/@layouts/components/VerticalNavLayout.vue

@@ -0,0 +1,208 @@
+<script lang="ts">
+import { useDisplay } from 'vuetify'
+import VerticalNav from '@layouts/components/VerticalNav.vue'
+
+export default defineComponent({
+  setup(props, { slots }) {
+    const isOverlayNavActive = ref(false)
+    const isLayoutOverlayVisible = ref(false)
+    const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)
+
+    const route = useRoute()
+    const { mdAndDown } = useDisplay()
+
+    // ℹ️ This is alternative to below two commented watcher
+    // We want to show overlay if overlay nav is visible and want to hide overlay if overlay is hidden and vice versa.
+    syncRef(isOverlayNavActive, isLayoutOverlayVisible)
+
+    return () => {
+      // 👉 Vertical nav
+      const verticalNav = h(
+        VerticalNav,
+        { isOverlayNavActive: isOverlayNavActive.value, toggleIsOverlayNavActive },
+        {
+          'nav-header': () => slots['vertical-nav-header']?.({ toggleIsOverlayNavActive }),
+          'before-nav-items': () => slots['before-vertical-nav-items']?.(),
+          'default': () => slots['vertical-nav-content']?.(),
+          'after-nav-items': () => slots['after-vertical-nav-items']?.(),
+        },
+      )
+
+      // 👉 Navbar
+      const navbar = h(
+        'header',
+        { class: ['layout-navbar navbar-blur'] },
+        [
+          h(
+            'div',
+            { class: 'navbar-content-container' },
+            slots.navbar?.({
+              toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
+            }),
+          ),
+        ],
+      )
+
+      const main = h(
+        'main',
+        { class: 'layout-page-content' },
+        h('div', { class: 'page-content-container' }, slots.default?.()),
+      )
+
+      // 👉 Footer
+      const footer = h(
+        'footer',
+        { class: 'layout-footer' },
+        [
+          h(
+            'div',
+            { class: 'footer-content-container' },
+            slots.footer?.(),
+          ),
+        ],
+      )
+
+      // 👉 Overlay
+      const layoutOverlay = h(
+        'div',
+        {
+          class: ['layout-overlay', { visible: isLayoutOverlayVisible.value }],
+          onClick: () => { isLayoutOverlayVisible.value = !isLayoutOverlayVisible.value },
+        },
+      )
+
+      return h(
+        'div',
+        {
+          class: [
+            'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid',
+            mdAndDown.value && 'layout-overlay-nav',
+            route.meta.layoutWrapperClasses,
+          ],
+        },
+        [
+          verticalNav,
+          h(
+            'div',
+            { class: 'layout-content-wrapper' },
+            [
+              navbar,
+              main,
+              footer,
+            ],
+          ),
+          layoutOverlay,
+        ],
+      )
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+@use "@configured-variables" as variables;
+@use "@layouts/styles/placeholders";
+@use "@layouts/styles/mixins";
+
+.layout-wrapper.layout-nav-type-vertical {
+  // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
+  block-size: 100%;
+
+  .layout-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-block-size: 100dvh;
+    transition: padding-inline-start 0.2s ease-in-out;
+    will-change: padding-inline-start;
+
+    @media screen and (min-width: 1280px) {
+      padding-inline-start: variables.$layout-vertical-nav-width;
+    }
+  }
+
+  .layout-navbar {
+    z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
+
+    .navbar-content-container {
+      block-size: variables.$layout-vertical-nav-navbar-height;
+    }
+
+    @at-root {
+      .layout-wrapper.layout-nav-type-vertical {
+        .layout-navbar {
+          @if variables.$layout-vertical-nav-navbar-is-contained {
+            @include mixins.boxed-content;
+          }
+
+          // else
+          @else {
+            .navbar-content-container {
+              @include mixins.boxed-content;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.layout-navbar-sticky .layout-navbar {
+    @extend %layout-navbar-sticky;
+  }
+
+  &.layout-navbar-hidden .layout-navbar {
+    @extend %layout-navbar-hidden;
+  }
+
+  // 👉 Footer
+  .layout-footer {
+    @include mixins.boxed-content;
+  }
+
+  // 👉 Layout overlay
+  .layout-overlay {
+    position: fixed;
+    z-index: variables.$layout-overlay-z-index;
+    background-color: rgb(0 0 0 / 60%);
+    cursor: pointer;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease-in-out;
+    will-change: opacity;
+
+    &.visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  // Adjust right column pl when vertical nav is collapsed
+  &.layout-vertical-nav-collapsed .layout-content-wrapper {
+    @media screen and (min-width: 1280px) {
+      padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
+    }
+  }
+
+  // 👉 Content height fixed
+  &.layout-content-height-fixed {
+    .layout-content-wrapper {
+      max-block-size: 100dvh;
+    }
+
+    .layout-page-content {
+      display: flex;
+      overflow: hidden;
+
+      .page-content-container {
+        inline-size: 100%;
+
+        > :first-child {
+          max-block-size: 100%;
+          overflow-y: auto;
+        }
+      }
+    }
+  }
+}
+</style>

typescript-version/@layouts/components/VerticalNavLink.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { NuxtLink } from '#components'
+
+import type { NavLink } from '@layouts/types'
+
+defineProps<{
+  item: NavLink
+}>()
+</script>
+
+<template>
+  <li
+    class="nav-link"
+    :class="{ disabled: item.disable }"
+  >
+    <Component
+      :is="item.to ? NuxtLink : 'a'"
+      :to="item.to"
+      :href="item.href"
+      :target="item.target"
+    >
+      <VIcon
+        :icon="item.icon || 'bxs-circle'"
+        class="nav-item-icon"
+      />
+      <!-- 👉 Title -->
+      <span class="nav-item-title">
+        {{ item.title }}
+      </span>
+      <span
+        class="nav-item-badge"
+        :class="item.badgeClass"
+      >
+        {{ item.badgeContent }}
+      </span>
+    </Component>
+  </li>
+</template>
+
+<style lang="scss">
+.layout-vertical-nav {
+  .nav-link a {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+}
+</style>

typescript-version/@layouts/components/VerticalNavSectionTitle.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { NavSectionTitle } from '@layouts/types'
+
+defineProps<{
+  item: NavSectionTitle
+}>()
+</script>
+
+<template>
+  <li class="nav-section-title">
+    <div class="title-wrapper">
+      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+      <span
+        class="title-text"
+        v-text="item.heading"
+      />
+      <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+    </div>
+  </li>
+</template>

typescript-version/@layouts/styles/_classes.scss

@@ -0,0 +1,3 @@
+.cursor-pointer {
+  cursor: pointer;
+}

typescript-version/@layouts/styles/_default-layout.scss

@@ -0,0 +1,35 @@
+// These are styles which are both common in layout w/ vertical nav & horizontal nav
+@use "@layouts/styles/rtl";
+@use "@layouts/styles/placeholders";
+@use "@layouts/styles/mixins";
+@use "@configured-variables" as variables;
+
+html,
+body {
+  min-block-size: 100%;
+}
+
+.layout-page-content {
+  @include mixins.boxed-content(true);
+
+  flex-grow: 1;
+
+  // TODO: Use grid gutter variable here
+  padding-block: 1.5rem;
+}
+
+.layout-footer {
+  .footer-content-container {
+    block-size: variables.$layout-vertical-nav-footer-height;
+  }
+
+  .layout-footer-sticky & {
+    position: sticky;
+    inset-block-end: 0;
+    will-change: transform;
+  }
+
+  .layout-footer-hidden & {
+    display: none;
+  }
+}

typescript-version/@layouts/styles/_global.scss

@@ -0,0 +1,10 @@
+*,
+::before,
+::after {
+  box-sizing: inherit;
+  background-repeat: no-repeat;
+}
+
+html {
+  box-sizing: border-box;
+}

typescript-version/@layouts/styles/_mixins.scss

@@ -0,0 +1,30 @@
+@use "placeholders";
+@use "@configured-variables" as variables;
+
+@mixin rtl {
+  @if variables.$enable-rtl-styles {
+    [dir="rtl"] & {
+      @content;
+    }
+  }
+}
+
+@mixin boxed-content($nest-selector: false) {
+  & {
+    @extend %boxed-content-spacing;
+
+    @at-root {
+      @if $nest-selector == false {
+        .layout-content-width-boxed#{&} {
+          @extend %boxed-content;
+        }
+      }
+      // stylelint-disable-next-line @stylistic/indentation
+      @else {
+        .layout-content-width-boxed & {
+          @extend %boxed-content;
+        }
+      }
+    }
+  }
+}

typescript-version/@layouts/styles/_placeholders.scss

@@ -0,0 +1,53 @@
+// placeholders
+@use "@configured-variables" as variables;
+
+%boxed-content {
+  @at-root #{&}-spacing {
+    // TODO: Use grid gutter variable here
+    padding-inline: 1.5rem;
+  }
+
+  inline-size: 100%;
+  margin-inline: auto;
+  max-inline-size: variables.$layout-boxed-content-width;
+}
+
+%layout-navbar-hidden {
+  display: none;
+}
+
+// ℹ️ We created this placeholder even it is being used in just layout w/ vertical nav because in future we might apply style to both navbar & horizontal nav separately
+%layout-navbar-sticky {
+  position: sticky;
+  inset-block-start: 0;
+
+  // will-change: transform;
+  // inline-size: 100%;
+}
+
+%style-scroll-bar {
+  /* width */
+
+  &::-webkit-scrollbar {
+    background: rgb(var(--v-theme-surface));
+    block-size: 8px;
+    border-end-end-radius: 14px;
+    border-start-end-radius: 14px;
+    inline-size: 4px;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    border-radius: 0.5rem;
+    background: rgb(var(--v-theme-perfect-scrollbar-thumb));
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+}

typescript-version/@layouts/styles/_rtl.scss

@@ -0,0 +1,7 @@
+@use "./mixins";
+
+.layout-vertical-nav .nav-group-arrow {
+  @include mixins.rtl {
+    transform: rotate(180deg);
+  }
+}

typescript-version/@layouts/styles/_variables.scss

@@ -0,0 +1,29 @@
+// @use "@styles/style.scss";
+
+// 👉 Vertical nav
+$layout-vertical-nav-z-index: 12 !default;
+$layout-vertical-nav-width: 260px !default;
+$layout-vertical-nav-collapsed-width: 80px !default;
+$selector-vertical-nav-mini: ".layout-vertical-nav-collapsed .layout-vertical-nav:not(:hover)";
+
+// 👉 Horizontal nav
+$layout-horizontal-nav-z-index: 11 !default;
+$layout-horizontal-nav-navbar-height: 64px !default;
+
+// 👉 Navbar
+$layout-vertical-nav-navbar-height: 64px !default;
+$layout-vertical-nav-navbar-is-contained: true !default;
+$layout-vertical-nav-layout-navbar-z-index: 11 !default;
+$layout-horizontal-nav-layout-navbar-z-index: 11 !default;
+
+// 👉 Main content
+$layout-boxed-content-width: 1440px !default;
+
+//  👉Footer
+$layout-vertical-nav-footer-height: 56px !default;
+
+// 👉 Layout overlay
+$layout-overlay-z-index: 11 !default;
+
+// 👉 RTL
+$enable-rtl-styles: true !default;

typescript-version/@layouts/styles/index.scss

@@ -0,0 +1,3 @@
+@use "global";
+@use "vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.min.css";
+@use "classes";

typescript-version/@layouts/types.ts

@@ -0,0 +1,59 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface AclProperties {
+  action: string
+  subject: string
+}
+
+// 👉 Vertical nav section title
+export interface NavSectionTitle extends Partial<AclProperties> {
+  heading: string
+}
+
+// 👉 Vertical nav link
+declare type ATagTargetAttrValues = '_blank' | '_self' | '_parent' | '_top' | 'framename'
+declare type ATagRelAttrValues =
+  | 'alternate'
+  | 'author'
+  | 'bookmark'
+  | 'external'
+  | 'help'
+  | 'license'
+  | 'next'
+  | 'nofollow'
+  | 'noopener'
+  | 'noreferrer'
+  | 'prev'
+  | 'search'
+  | 'tag'
+
+export interface NavLinkProps {
+  to?: RouteLocationRaw | string | null
+  href?: string
+  target?: ATagTargetAttrValues
+  rel?: ATagRelAttrValues
+}
+
+export interface NavLink extends NavLinkProps, Partial<AclProperties> {
+  title: string
+  icon?: unknown
+  badgeContent?: string
+  badgeClass?: string
+  disable?: boolean
+}
+
+// 👉 Vertical nav group
+export interface NavGroup extends Partial<AclProperties> {
+  title: string
+  icon?: unknown
+  badgeContent?: string
+  badgeClass?: string
+  children: (NavLink | NavGroup)[]
+  disable?: boolean
+}
+
+// 👉 Components ========================
+export interface ThemeSwitcherTheme {
+  name: string
+  icon: string
+}

typescript-version/@layouts/utils.ts

@@ -0,0 +1,12 @@
+export const hexToRgb = (hex: string) => {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+
+  hex = hex.replace(shorthandRegex, (m: string, r: string, g: string, b: string) => {
+    return r + r + g + g + b + b
+  })
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
+  return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null
+}