@nathapp/na-cli 1.0.1-rc.6 → 1.0.1

package/dist/templates/vuexy-portal/src/@layouts/components/VerticalNavLayout.vue

@@ -0,0 +1,232 @@
+<script lang="ts">
+import type { PropType } from 'vue'
+import { VerticalNav } from '@layouts/components'
+import { useLayoutConfigStore } from '@layouts/stores/config'
+import type { VerticalNavItems } from '@layouts/types'
+
+export default defineComponent({
+  props: {
+    navItems: {
+      type: Array as PropType<VerticalNavItems>,
+      required: true,
+    },
+    verticalNavAttrs: {
+      type: Object as PropType<Record<string, null>>,
+      default: () => ({}),
+    },
+  },
+  setup(props, { slots }) {
+    const { width: windowWidth } = useWindowSize()
+    const configStore = useLayoutConfigStore()
+
+    const isOverlayNavActive = ref(false)
+    const isLayoutOverlayVisible = ref(false)
+    const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)
+
+    // ℹ️ 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)
+
+    // watch(isOverlayNavActive, value => {
+    //   // Sync layout overlay with overlay nav
+    //   isLayoutOverlayVisible.value = value
+    // })
+
+    // watch(isLayoutOverlayVisible, value => {
+    //   // If overlay is closed via click, close hide overlay nav
+    //   if (!value) isOverlayNavActive.value = false
+    // })
+
+    // ℹ️ Hide overlay if user open overlay nav in <md and increase the window width without closing overlay nav
+    watch(windowWidth, () => {
+      if (!configStore.isLessThanOverlayNavBreakpoint && isLayoutOverlayVisible.value)
+        isLayoutOverlayVisible.value = false
+    })
+
+    return () => {
+      const verticalNavAttrs = toRef(props, 'verticalNavAttrs')
+
+      const { wrapper: verticalNavWrapper, wrapperProps: verticalNavWrapperProps, ...additionalVerticalNavAttrs } = verticalNavAttrs.value
+
+      // 👉 Vertical nav
+      const verticalNav = h(
+        VerticalNav,
+        { isOverlayNavActive: isOverlayNavActive.value, toggleIsOverlayNavActive, navItems: props.navItems, ...additionalVerticalNavAttrs },
+        {
+          'nav-header': () => slots['vertical-nav-header']?.(),
+          'before-nav-items': () => slots['before-vertical-nav-items']?.(),
+        },
+      )
+
+      // 👉 Navbar
+      const navbar = h(
+        'header',
+        { class: ['layout-navbar', { 'navbar-blur': configStore.isNavbarBlurEnabled }] },
+        [
+          h(
+            'div',
+            { class: 'navbar-content-container' },
+            slots.navbar?.({
+              toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
+            }),
+          ),
+        ],
+      )
+
+      // 👉 Content area
+      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', ...configStore._layoutClasses] },
+        [
+          verticalNavWrapper ? h(verticalNavWrapper, verticalNavWrapperProps, { default: () => verticalNav }) : 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;
+          }
+          /* stylelint-disable-next-line @stylistic/indentation */
+          @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: transform;
+
+    &.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>

package/dist/templates/vuexy-portal/src/@layouts/components/VerticalNavLink.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { layoutConfig } from '@layouts'
+import { can } from '@layouts/plugins/casl'
+import { useLayoutConfigStore } from '@layouts/stores/config'
+import type { NavLink } from '@layouts/types'
+import { getComputedNavLinkToProp, getDynamicI18nProps, isNavLinkActive } from '@layouts/utils'
+
+defineProps<{
+  item: NavLink
+}>()
+
+const configStore = useLayoutConfigStore()
+const hideTitleAndBadge = configStore.isVerticalNavMini()
+</script>
+
+<template>
+  <li
+    v-if="can(item.action, item.subject)"
+    class="nav-link"
+    :class="{ disabled: item.disable }"
+  >
+    <Component
+      :is="item.to ? 'RouterLink' : 'a'"
+      v-bind="getComputedNavLinkToProp(item)"
+      :class="{ 'router-link-active router-link-exact-active': isNavLinkActive(item, $router) }"
+    >
+      <Component
+        :is="layoutConfig.app.iconRenderer || 'div'"
+        v-bind="item.icon || layoutConfig.verticalNav.defaultNavItemIconProps"
+        class="nav-item-icon"
+      />
+      <TransitionGroup name="transition-slide-x">
+        <!-- 👉 Title -->
+        <Component
+          :is="layoutConfig.app.i18n.enable ? 'i18n-t' : 'span'"
+          v-show="!hideTitleAndBadge"
+          key="title"
+          class="nav-item-title"
+          v-bind="getDynamicI18nProps(item.title, 'span')"
+        >
+          {{ item.title }}
+        </Component>
+
+        <!-- 👉 Badge -->
+        <Component
+          :is="layoutConfig.app.i18n.enable ? 'i18n-t' : 'span'"
+          v-if="item.badgeContent"
+          v-show="!hideTitleAndBadge"
+          key="badge"
+          class="nav-item-badge"
+          :class="item.badgeClass"
+          v-bind="getDynamicI18nProps(item.badgeContent, 'span')"
+        >
+          {{ item.badgeContent }}
+        </Component>
+      </TransitionGroup>
+    </Component>
+  </li>
+</template>
+
+<style lang="scss">
+.layout-vertical-nav {
+  .nav-link a {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/dist/templates/vuexy-portal/src/@layouts/components/VerticalNavSectionTitle.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { layoutConfig } from '@layouts'
+import { can } from '@layouts/plugins/casl'
+import { useLayoutConfigStore } from '@layouts/stores/config'
+import type { NavSectionTitle } from '@layouts/types'
+import { getDynamicI18nProps } from '@layouts/utils'
+
+defineProps<{
+  item: NavSectionTitle
+}>()
+
+const configStore = useLayoutConfigStore()
+const shallRenderIcon = configStore.isVerticalNavMini()
+</script>
+
+<template>
+  <li
+    v-if="can(item.action, item.subject)"
+    class="nav-section-title"
+  >
+    <div class="title-wrapper">
+      <Transition
+        name="vertical-nav-section-title"
+        mode="out-in"
+      >
+        <Component
+          :is="shallRenderIcon ? layoutConfig.app.iconRenderer : layoutConfig.app.i18n.enable ? 'i18n-t' : 'span'"
+          :key="shallRenderIcon"
+          :class="shallRenderIcon ? 'placeholder-icon' : 'title-text'"
+          v-bind="{ ...layoutConfig.icons.sectionTitlePlaceholder, ...getDynamicI18nProps(item.heading, 'span') }"
+        >
+          {{ !shallRenderIcon ? item.heading : null }}
+        </Component>
+      </Transition>
+    </div>
+  </li>
+</template>

package/dist/templates/vuexy-portal/src/@layouts/styles/_classes.scss

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

package/dist/templates/vuexy-portal/src/@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;
+  }
+}

package/dist/templates/vuexy-portal/src/@layouts/styles/_global.scss

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

package/dist/templates/vuexy-portal/src/@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;
+        }
+      }
+    }
+  }
+}

package/dist/templates/vuexy-portal/src/@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;
+  }
+}

package/dist/templates/vuexy-portal/src/@layouts/styles/_rtl.scss

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

package/dist/templates/vuexy-portal/src/@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;

package/dist/templates/vuexy-portal/src/@layouts/styles/index.scss

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

package/dist/templates/vuexy-portal/src/App.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useTheme } from 'vuetify'
+import ScrollToTop from '@core/components/ScrollToTop.vue'
+import initCore from '@core/initCore'
+import { initConfigStore, useConfigStore } from '@core/stores/config'
+import { hexToRgb } from '@layouts/utils'
+
+const { global } = useTheme()
+
+// ℹ️ Sync current theme with initial loader theme
+initCore()
+initConfigStore()
+
+const configStore = useConfigStore()
+</script>
+
+<template>
+  <VLocaleProvider :rtl="configStore.isAppRTL">
+    <!-- ℹ️ This is required to set the background color of active nav link based on currently active global theme's primary -->
+    <VApp :style="`--v-global-theme-primary: ${hexToRgb(global.current.value.colors.primary)}`">
+      <RouterView />
+
+      <ScrollToTop />
+    </VApp>
+  </VLocaleProvider>
+</template>

package/dist/templates/vuexy-portal/src/assets/images/customizer-icons/border-light.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="104" height="66" viewBox="0 0 104 66" fill="none">
+  <rect width="104" height="66" rx="4" fill="currentColor" fill-opacity="0.02"/>
+  <rect x="4.90625" y="23.8839" width="17.6604" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="8.83008" y="5.88135" width="9.81132" height="9.70588" rx="2" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="4.90625" y="34.4381" width="17.6604" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="4.90625" y="44.9923" width="17.6604" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="4.90625" y="55.5462" width="17.6604" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="34.6152" y="5.17166" width="63.7547" height="7.8" rx="1.5" stroke="currentColor" stroke-opacity="0.12"/>
+  <rect x="37.0391" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="80.21" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="86.0957" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="91.002" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="58.9844" y="20.1134" width="39.2264" height="16.6" rx="1.5" stroke="currentColor" stroke-opacity="0.12"/>
+  <rect x="34.6152" y="20.1134" width="18.0455" height="16.6" rx="1.5" stroke="currentColor" stroke-opacity="0.12"/>
+  <rect x="34.6152" y="42.9545" width="63.7547" height="16.6" rx="1.5" stroke="currentColor" stroke-opacity="0.12"/>
+</svg>

package/dist/templates/vuexy-portal/src/assets/images/customizer-icons/collapsed-light.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="104" height="66" viewBox="0 0 104 66" fill="none">
+  <rect width="104" height="66" rx="4" fill="currentColor" fill-opacity="0.02"/>
+  <path d="M0 4C0 1.79086 1.79086 0 4 0H13.7359V66H4C1.79086 66 0 64.2091 0 62V4Z" fill="currentColor" fill-opacity="0.04"/>
+  <rect x="2.94336" y="23.8839" width="7.84906" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="3.43359" y="5.88135" width="6.86793" height="6.79412" rx="2" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="2.94336" y="34.4382" width="7.84906" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="2.94336" y="44.9923" width="7.84906" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="2.94336" y="55.5463" width="7.84906" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="21.4717" y="4.67169" width="75.437" height="8.8" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="25.6172" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="78.248" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="84.1348" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="90.0215" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="50.4912" y="19.6134" width="46.8212" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="21.4717" y="19.6134" width="22.1679" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="21.4717" y="42.4545" width="75.8413" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+</svg>

package/dist/templates/vuexy-portal/src/assets/images/customizer-icons/compact-light.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="104" height="66" viewBox="0 0 104 66" fill="none">
+  <rect width="104" height="66" rx="4" fill="currentColor" fill-opacity="0.02"/>
+  <rect x="19.4209" y="4.67169" width="64.7547" height="8.8" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="22.3447" y="6.87164" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="65.5146" y="6.87164" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="71.4014" y="6.87164" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="77.2881" y="6.87164" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="44.3525" y="19.6135" width="40.2264" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="19.4209" y="19.6135" width="19.0455" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="19.4209" y="42.4545" width="65.1591" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+</svg>

package/dist/templates/vuexy-portal/src/assets/images/customizer-icons/default-light.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="104" height="66" viewBox="0 0 104 66" fill="none">
+  <rect width="104" height="66" rx="4" fill="currentColor" fill-opacity="0.02"/>
+  <path d="M0 4C0 1.79086 1.79086 0 4 0H27.4717V66H4C1.79086 66 0 64.2091 0 62V4Z" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="4.90625" y="23.8839" width="17.6604" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="8.83008" y="5.88135" width="9.81132" height="9.70588" rx="2" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="4.90625" y="34.4381" width="17.6604" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="4.90625" y="44.9923" width="17.6604" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="4.90625" y="55.5462" width="17.6604" height="2.78946" rx="1.39473" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="34.1152" y="4.67166" width="64.7547" height="8.8" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="37.0391" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="80.21" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="86.0957" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="91.9824" y="6.87158" width="3.92453" height="4.4" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="58.4844" y="19.6134" width="40.2264" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="34.1152" y="19.6134" width="19.0455" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="34.1152" y="42.4545" width="64.7547" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+</svg>

package/dist/templates/vuexy-portal/src/assets/images/customizer-icons/horizontal-light.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="104" height="66" viewBox="0 0 104 66" fill="none">
+  <rect width="104" height="66" rx="4" fill="currentColor" fill-opacity="0.02"/>
+  <rect x="44.0068" y="19.6136" width="46.8212" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="14.9854" y="19.6136" width="22.1679" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="14.9854" y="42.4547" width="75.8413" height="17.6" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="14.9248" y="4.68896" width="74.1506" height="9.00999" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="20.0264" y="6.50403" width="6.00327" height="5.38019" rx="1" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="33.877" y="7.96356" width="6.6372" height="2.46129" rx="1.23064" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="48.3652" y="7.96356" width="6.6372" height="2.46129" rx="1.23064" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="62.8506" y="7.96356" width="6.6372" height="2.46129" rx="1.23064" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="77.3379" y="7.96356" width="6.6372" height="2.46129" rx="1.23064" fill="currentColor" fill-opacity="0.3"/>
+</svg>

package/dist/templates/vuexy-portal/src/assets/images/customizer-icons/ltr-light.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="104" height="66" viewBox="0 0 104 66" fill="none">
+  <rect width="104" height="66" rx="4" fill="currentColor" fill-opacity="0.02"/>
+  <rect x="5.20215" y="4.12146" width="24.0976" height="57.5885" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="10.3232" y="16.8697" width="13.8545" height="2.0921" rx="1.04605" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="10.3232" y="25.5618" width="9.87943" height="2.0921" rx="1.04605" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="10.3232" y="34.2538" width="12.3826" height="2.0921" rx="1.04605" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="10.3232" y="42.946" width="6.08818" height="2.0921" rx="1.04605" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="10.3232" y="51.6384" width="8.09094" height="2.0921" rx="1.04605" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="35.5137" y="4.12134" width="62.3885" height="57.5885" rx="2" fill="currentColor" fill-opacity="0.08"/>
+  <rect x="43.7578" y="14.1833" width="13.8545" height="2.0921" rx="1.04605" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="43.7578" y="22.8753" width="32.8013" height="2.0921" rx="1.04605" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="43.7578" y="31.5674" width="41.2076" height="2.0921" rx="1.04605" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="43.7578" y="40.2593" width="32.8013" height="2.0921" rx="1.04605" fill="currentColor" fill-opacity="0.3"/>
+  <rect x="43.7578" y="48.9517" width="5.77482" height="2.0921" rx="1.04605" fill="currentColor" fill-opacity="0.3"/>
+</svg>