@imaginario27/air-ui-ds 1.0.15 → 1.0.17

package/components/buttons/ActionButton.vue

@@ -47,11 +47,11 @@
                     v-if="icon && !svgIcon"
                     :icon
                     preserveAspectRatio="xMidYMid meet"
-                    :class="iconSizeClass"
+                    :class="[iconSizeClass, iconClass ]"
                 />
                 <span
                     v-else-if="svgIcon"
-                    :class="iconSizeClass"
+                    :class="[iconSizeClass, iconClass ]"
                 >
                     <SVGImage
                         :src="svgIcon"
@@ -70,11 +70,11 @@
                     v-if="icon"
                     :icon="icon"
                     preserveAspectRatio="xMidYMid meet"
-                    :class="iconSizeClass"
+                    :class="[iconSizeClass, iconClass]"
                 />
                 <span
                     v-else-if="svgIcon"
-                    :class="iconSizeClass"
+                    :class="[iconSizeClass, iconClass]"
                 >
                     <SVGImage
                         :src="svgIcon"
@@ -117,6 +117,7 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'Button text'
     },
+    textClass: String as PropType<string>,
     size: {
         type: String as PropType<ButtonSize>,
         default: ButtonSize.LG,
@@ -136,6 +137,7 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    iconClass: String as PropType<string>,
     disabled: {
         type: Boolean as PropType<boolean>,
         default: false,
@@ -169,7 +171,6 @@ const props = defineProps({
         default: 'Processing...',
     },
     id: String as PropType<string>,
-    textClass: String as PropType<string>,
 })
 
 // Emits

package/components/buttons/ActionIconButton.vue

@@ -22,11 +22,11 @@
             v-if="icon && !svgIcon"
             :icon
             preserveAspectRatio="xMidYMid meet"
-            :class="iconSizeClass"
+            :class="[iconSizeClass, iconClass]"
         />
         <span
             v-else-if="svgIcon"
-            :class="iconSizeClass"
+            :class="[iconSizeClass, iconClass]"
         >
             <SVGImage
                 :src="svgIcon"
@@ -77,6 +77,7 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false
     },
+    iconClass: String as PropType<string>,
     disabled: {
         type: Boolean as PropType<boolean>,
         default: false,

package/components/buttons/CopyButton.vue

@@ -0,0 +1,158 @@
+<template>
+    <ActionIconButton 
+        v-if="buttonType === ButtonType.ACTION_ICON_BUTTON"
+        :styleType
+        :size
+        :icon="currentCopyButtonIcon"
+        :iconClass="currentIconClass"
+        :disabled
+        @click="handleCopy"
+    />
+    <ActionButton 
+        v-else
+        :styleType
+        :size
+        :text="currentCopyButtonText"
+        :icon="currentCopyButtonIcon"
+        :iconPosition
+        :iconClass="currentIconClass"
+        :disabled
+        @click="handleCopy"
+    />
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    textToCopy: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    copySuccessText: {
+        type: String as PropType<string>,
+        default: 'Copied to clipboard!',
+    },
+    copyErrorText: {
+        type: String as PropType<string>,
+        default: 'Failed to copy to clipboard.',
+    },
+    showToast: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    resetAfter: {
+        type: Number as PropType<number>,
+        default: 1500,
+    },
+    buttonType: {
+        type: String as PropType<ButtonType>,
+        default: ButtonType.ACTION_ICON_BUTTON,
+        validator: (value: ButtonType) => Object.values(ButtonType).includes(value),
+    },
+    styleType: {
+    type: String as PropType<
+        ButtonStyleType.NEUTRAL_FILLED
+        | ButtonStyleType.NEUTRAL_OUTLINED
+        | ButtonStyleType.NEUTRAL_TRANSPARENT
+        | ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE
+        | ButtonStyleType.PRIMARY_BRAND_FILLED
+        | ButtonStyleType.PRIMARY_BRAND_SOFT
+        | ButtonStyleType.PRIMARY_BRAND_TRANSPARENT
+        | ButtonStyleType.SECONDARY_BRAND_FILLED
+    >,
+    default: ButtonStyleType.NEUTRAL_OUTLINED,
+        validator: (value: unknown) =>
+            typeof value === 'string' &&
+            [
+                ButtonStyleType.NEUTRAL_FILLED,
+                ButtonStyleType.NEUTRAL_OUTLINED,
+                ButtonStyleType.NEUTRAL_TRANSPARENT,
+                ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE,
+                ButtonStyleType.PRIMARY_BRAND_FILLED,
+                ButtonStyleType.PRIMARY_BRAND_SOFT,
+                ButtonStyleType.PRIMARY_BRAND_TRANSPARENT,
+                ButtonStyleType.SECONDARY_BRAND_FILLED,
+            ].includes(value as ButtonStyleType),
+    },
+    text: {
+        type: String as PropType<string>,
+        default: 'Copy'
+    },
+    size: {
+        type: String as PropType<ButtonSize>,
+        default: ButtonSize.SM,
+        validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: "mdiContentCopy",
+    },
+    iconPosition: {
+        type: String as PropType<IconPosition>,
+        default: IconPosition.RIGHT,
+        validator: (value: IconPosition) => Object.values(IconPosition).includes(value),
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// States
+const currentCopyButtonIcon = ref<any>(props.icon)
+const currentCopyButtonText = ref<string>(props.text)
+const currentIconClass = ref<string | undefined>(undefined)
+
+// Emits
+const emit = defineEmits(['success', 'error'])
+
+// Initialize toast
+const { $toast } = useNuxtApp()
+
+// Methods
+const handleCopy = useThrottleFn(
+    async () => {
+        const success = await copyToClipboard(props.textToCopy)
+
+        if (success) {
+            currentCopyButtonIcon.value = 'mdiCheck'
+            currentCopyButtonText.value = props.copySuccessText
+
+            if (
+                props.styleType === ButtonStyleType.NEUTRAL_OUTLINED ||
+                props.styleType === ButtonStyleType.NEUTRAL_TRANSPARENT ||
+                props.styleType === ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE
+            ) {
+                currentIconClass.value = 'text-icon-success'
+            }
+
+            if (props.showToast) {
+                $toast.success(props.copySuccessText, {
+                    toastId: 'copy-button-success',
+                })
+            }
+
+            emit('success')
+        } else {
+            currentCopyButtonIcon.value = 'mdiAlertCircleOutline'
+            currentCopyButtonText.value = props.copyErrorText
+
+            if (props.showToast) {
+                $toast.error(props.copyErrorText, {
+                    toastId: 'copy-button-error',
+                })
+            }
+
+            emit('error')
+        }
+
+        // Reset UI after delay
+        setTimeout(() => {
+            currentCopyButtonIcon.value = props.icon
+            currentCopyButtonText.value = props.text
+            currentIconClass.value = undefined
+        }, props.resetAfter)
+    },
+    props.resetAfter,
+    true, // trailing only
+)
+</script>

package/components/forms/DataDetailsFieldGroup.vue

@@ -4,7 +4,7 @@
             'flex',
             'flex-col',
             'gap-4',
-            dividedRows && '!gap-0 divide-y divide-border-neutral-subtle border-b border-border-neutral-subtle'
+            'mt-2',
         ]"
     >
     <h3
@@ -12,7 +12,6 @@
             'form-field-group-title',
             'font-semibold',
             'text-text-neutral-subtle',
-            dividedRows && 'mb-4'
         ]"
     >
             {{ title }}
@@ -27,9 +26,5 @@ defineProps({
         type: String as PropType<string>,
         default: 'Group title',
     },
-    dividedRows: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-    },
 })
 </script>

package/components/forms/FormFieldGroup.vue

@@ -4,7 +4,7 @@
             'flex',
             'flex-col',
             'gap-4',
-            dividedRows && '!gap-0 divide-y divide-border-neutral-subtle border-b border-border-neutral-subtle'
+            'mt-2',
         ]"
     >
     <h3
@@ -12,7 +12,6 @@
             'form-field-group-title',
             'font-semibold',
             'text-text-neutral-subtle',
-            dividedRows && 'mb-4'
         ]"
     >
             {{ title }}
@@ -27,9 +26,5 @@ defineProps({
         type: String as PropType<string>,
         default: 'Group title',
     },
-    dividedRows: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-    },
 })
 </script>

package/components/layouts/Footer.vue

@@ -0,0 +1,104 @@
+<template>
+    <footer 
+        :class="[
+            'w-full',
+            'bg-background-surface',
+            'py-section-xs',
+            hasSidePadding && 'px-content-side-padding-mobile md:px-content-side-padding',
+        ]"
+    >
+        <MaxWidthContainer
+            :class="[!hasContentMaxWidth && '!max-w-full']"
+        >
+            <template v-if="!$slots['default']">
+                <div 
+                    :class="[
+                        'w-full',
+                        'flex',
+                        'flex-col',
+                        isMobileCentered &&'items-center text-center',
+                        'gap-10',
+                        'lg:flex-row',
+                        'lg:items-start',
+                        'lg:text-left',
+                        'lg:justify-between',
+                    ]"
+                >
+                    <span class="text-sm text-text-neutral-subtle">
+                        {{ credits }}
+                    </span>
+
+                    <nav v-if="menuItems?.length">
+                        <ul class="flex flex-col lg:flex-row gap-5">
+                            <li 
+                                v-for="(item, index) in menuItems" 
+                                :key="index"
+                            >
+                                <NuxtLink
+                                    :to="item.to"
+                                    :class="[
+                                        'text-sm',
+                                        'hover:text-text-primary-brand-hover',
+                                        'transition-colors',
+                                    ]"
+                                >
+                                    {{ item.text }}
+                                </NuxtLink>
+                            </li>
+                        </ul>
+                    </nav>
+
+                    <div v-if="socialNetworks?.length" class="flex gap-5">
+                        <a 
+                            v-for="(network, index) in socialNetworks" 
+                            :key="index"
+                            :href="network.link"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            :class="[
+                                'text-text-neutral-subtle',
+                                'hover:text-text-primary-brand-hover',
+                                'transition-colors',
+                            ]"
+                            :aria-label="network.name"
+                        >
+                            <img 
+                                :src="network.icon"
+                                :alt="`${network.name} icon`"
+                                width="20"
+                                height="20"
+                                class="min-w-[20px] min-h-[20px]"
+                            />
+                        </a>
+                    </div>  
+                </div>
+            </template>
+            <template v-else>
+                <slot />    
+            </template>
+        </MaxWidthContainer>
+    </footer>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    credits: {
+        type: String as PropType<string>,
+        default: '© <year> <your-company>. All rights reserved.',
+    },
+    menuItems: Array as PropType<MenuItem[]>,
+    socialNetworks: Array as PropType<SocialNetwork[]>,
+    hasContentMaxWidth: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasSidePadding: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    isMobileCentered: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+</script>

package/components/layouts/Heading.vue

@@ -3,26 +3,32 @@
         :class="[
             'w-full flex flex-col',
             alignmentClasses,
-            titleClass,
         ]"
     >
         <!-- Overtitle -->
-        <p
+        <span
             v-if="overtitle"
             :class="[
                 'font-semibold',
                 overtitleSizeClass,
                 'text-text-secondary-brand-default',
                 spaceOvertitleClass,
+                isOverTitleUppercase && 'uppercase',
+                overtitleClass,
             ]"
         >
             {{ overtitle }}
-        </p>
+        </span>
 
         <!-- Dynamic title -->
         <component
             :is="headingTag"
-            :class="[titleSizeClass, 'font-semibold', 'text-text-default']"
+            :class="[
+                titleSizeClass, 
+                'font-semibold', 
+                'text-text-default',
+                titleClass,
+            ]"
         >
             {{ title }}
         </component>
@@ -30,7 +36,12 @@
         <!-- Description -->
         <p
             v-if="description"
-            :class="[descriptionSizeClass, 'text-text-neutral-subtle', spaceDescriptionClass]"
+            :class="[
+                descriptionSizeClass, 
+                'text-text-neutral-subtle', 
+                spaceDescriptionClass,
+                descriptionClass,
+            ]"
         >
             {{ description }}
         </p>
@@ -41,6 +52,10 @@
 // Props
 const props = defineProps({
     overtitle: String as PropType<string>,
+    isOverTitleUppercase: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
     title: { 
         type: String as PropType<string>, 
         default: 'Heading title' 
@@ -64,15 +79,17 @@ const props = defineProps({
             Object.values(HeadingSpacing).includes(value as HeadingSpacing),
     },
     headingTag: {
-        type: [String, Number] as PropType<'h1' | 'h2' | 'h3'>,
+        type: [String, Number] as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>,
         default: 'h1',
-        validator: (value: string | number) => ['h1', 'h2', 'h3'].includes(value as string)
+        validator: (value: string | number) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value as string)
     },
     isMobileCentered: {
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    overtitleClass: String as PropType<string>,
     titleClass: String as PropType<string>,
+    descriptionClass: String as PropType<string>,
 })
 
 // Computed classes
@@ -100,6 +117,8 @@ const alignmentClasses = computed(() => {
 
 const titleSizeClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'text-lg',
+        [HeadingSize.XS]: 'text-xl',
         [HeadingSize.SM]: 'text-2xl',
         [HeadingSize.MD]: 'text-3xl md:text-4xl',
         [HeadingSize.LG]: 'text-4xl md:text-5xl',
@@ -110,6 +129,8 @@ const titleSizeClass = computed(() => {
 
 const overtitleSizeClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'text-xs',
+        [HeadingSize.XS]: 'text-sm',
         [HeadingSize.SM]: 'text-sm',
         [HeadingSize.MD]: 'text-base',
         [HeadingSize.LG]: 'text-base',
@@ -120,6 +141,8 @@ const overtitleSizeClass = computed(() => {
 
 const descriptionSizeClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'text-sm',
+        [HeadingSize.XS]: 'text-sm',
         [HeadingSize.SM]: 'text-sm',
         [HeadingSize.MD]: 'text-lg',
         [HeadingSize.LG]: 'text-lg',
@@ -130,6 +153,8 @@ const descriptionSizeClass = computed(() => {
 
 const spaceOvertitleClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'mb-1',
+        [HeadingSize.XS]: 'mb-1',
         [HeadingSize.SM]: 'mb-1',
         [HeadingSize.MD]: 'mb-3',
         [HeadingSize.LG]: 'mb-3',
@@ -140,12 +165,16 @@ const spaceOvertitleClass = computed(() => {
 
 const spaceDescriptionClass = computed(() => {
     const normal = {
+        [HeadingSize.XXS]: 'mt-3',
+        [HeadingSize.XS]: 'mt-3',
         [HeadingSize.SM]: 'mt-3',
         [HeadingSize.MD]: 'mt-4',
         [HeadingSize.LG]: 'mt-6',
         [HeadingSize.XL]: 'mt-4',
     }
     const spaced = {
+        [HeadingSize.XXS]: 'mt-4',
+        [HeadingSize.XS]: 'mt-4',
         [HeadingSize.SM]: 'mt-4',
         [HeadingSize.MD]: 'mt-5',
         [HeadingSize.LG]: 'mt-9',

package/components/layouts/Overtitle.vue

@@ -1,7 +1,7 @@
 <template>
     <span 
         :class="[
-            'text-text-primary-brand-default',
+            colorClass,
             'text-sm',
             'font-medium',
             isUppercase && 'uppercase',
@@ -12,7 +12,7 @@
 </template>
 <script setup lang="ts">
 // Props
-defineProps({
+const props = defineProps({
     title: {
         type: String as PropType<string>,
         default: 'Overtitle'
@@ -20,6 +20,32 @@ defineProps({
     isUppercase: {
         type: Boolean as PropType<boolean>,
         default: true,
+    },
+    color: {
+        type: String as PropType<
+            ColorAccent.PRIMARY_BRAND
+            | ColorAccent.SECONDARY_BRAND
+            | ColorAccent.NEUTRAL
+        >,
+        default: ColorAccent.SECONDARY_BRAND,
+        validator: (value: unknown): value is ColorAccent => {
+            return typeof value === 'string' &&
+                [
+                    ColorAccent.PRIMARY_BRAND,
+                    ColorAccent.SECONDARY_BRAND,
+                    ColorAccent.NEUTRAL,
+                ].includes(value as ColorAccent)
+        },
+    },
+})
+
+const colorClass = computed(() => {
+    const variant: Partial<Record<ColorAccent, string>> = {
+        [ColorAccent.NEUTRAL]: 'text-text-default',
+        [ColorAccent.PRIMARY_BRAND]: 'text-text-primary-brand-default',
+        [ColorAccent.SECONDARY_BRAND]: 'text-text-secondary-brand-default',
     }
+
+    return variant[props.color as ColorAccent] || 'text-text-secondary-brand-default'
 })
 </script>

package/components/layouts/headers/CompactHeader.vue

@@ -23,7 +23,7 @@
                     'bg-background-surface/30 dark:bg-background-surface/85',
                 ],
                 hasBorder && 'border-b border-border-default',
-                innerContainerClass,
+                headerClass,
             ]"
         >
             <!-- Logo -->
@@ -154,10 +154,10 @@
 
 <script setup lang="ts">
 // Props
-defineProps({
-    pageTitleType: {
-        type: String as PropType<PageTitleType>,
-        default: PageTitleType.SIMPLE,
+const props = defineProps({
+    pageTitleFormat: {
+        type: String as PropType<PageTitleFormat>,
+        default: PageTitleFormat.SIMPLE,
     },
     navMenuItems: {
         type: Array as PropType<MenuItem[]>,
@@ -206,7 +206,7 @@ defineProps({
         type: String as PropType<string>,
         default: 'lg:hidden min-w-[280px]'
     },
-    innerContainerClass: String as PropType<string>,
+    headerClass: String as PropType<string>,
 })
 
 // Composables
@@ -221,6 +221,6 @@ const currentPageTitle = computed<string>(() =>
 
 // Dynamically set the page title
 useHead(() => ({
-    title: pageTitle(currentPageTitle.value, App.NAME),
+    title: pageTitle(currentPageTitle.value, App.NAME, props.pageTitleFormat),
 }))
 </script>

package/components/layouts/headers/{PageHeader.vue → ContentPageHeader.vue}

@@ -8,7 +8,7 @@
             hasSidePadding && 'px-content-side-padding-mobile md:px-content-side-padding',
             'pt-12',
             'pb-8',
-            'border-b border-border-default'
+            hasSeparator && 'border-b border-border-default'
         ]"
     >
         <NavLink 
@@ -43,7 +43,7 @@
         </h1>
 
         <p 
-            v-if="pageDescription || description"
+            v-if="showDescription && (pageDescription || description)"
             class="text-text-neutral-subtle text-lg max-w-[800px]"
         >
             {{ description ? description : pageDescription }}
@@ -60,13 +60,13 @@ defineProps({
     },
     title: String as PropType<string>,
     overtitle: String as PropType<string>,
-    overtitleClass: String as PropType<string>,
-    description: String as PropType<string>,
     isOverTitleUppercase: Boolean as PropType<boolean>,
-    hasSidePadding: {
+    overtitleClass: String as PropType<string>,
+    showDescription: {
         type: Boolean as PropType<boolean>,
         default: true,
     },
+    description: String as PropType<string>,
     hasGoBackLink: {
         type: Boolean as PropType<boolean>,
         default: false,
@@ -79,6 +79,14 @@ defineProps({
         type: String as PropType<string>,
         default: '',
     },
+    hasSeparator: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasSidePadding: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
 })
 
 // Page title

package/models/enums/buttons.ts

@@ -36,3 +36,8 @@ export enum ButtonPaginationStyle {
     BUTTON = 'button',
     OVERLINE = 'overline',
 }
+
+export enum ButtonType {
+    ACTION_BUTTON = 'action-button',
+    ACTION_ICON_BUTTON = 'action-icon-button',
+}

package/models/enums/headings.ts

@@ -1,4 +1,6 @@
 export enum HeadingSize {
+    XXS = 'xxs',
+    XS = 'xs',
     SM = 'sm',
     MD = 'md',
     LG = 'lg',

package/models/enums/notifications.ts

@@ -0,0 +1,4 @@
+export enum NotificationType {
+    INLINE = 'inline',
+    TOAST = 'toast',
+}

package/models/enums/pages.ts

@@ -1,7 +1,7 @@
 export enum PageTitleType {
     SIMPLE = 'simple',
-    WITH_OVERTITLE = 'withOvertitle',
-    WITH_BREADCRUMBS = 'withBreadcrumbs',
+    WITH_OVERTITLE = 'with-overtitle',
+    WITH_BREADCRUMBS = 'with-breadcrumbs',
 }
 
 export enum PageTitleFormat {

package/models/types/navigation.ts

@@ -3,9 +3,10 @@ export interface MenuItem {
     to: string
 }
 
-export interface FooterMenuItem {
-    text: string
-    to: string
+export interface SocialNetwork {
+    name: string
+    link: string
+    icon: any
 }
 
 export interface SidebarMenuItem {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.0.15",
+    "version": "1.0.17",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",

package/components/layouts/ContainerWrapper.vue

@@ -1,13 +0,0 @@
-<template>
-    <div
-        :class="[
-            'flex',
-            'flex-col',
-            'gap-6',
-            'bg-white',
-            'py-4 md:py-8'
-        ]"
-    >
-        <slot></slot>
-    </div>
-</template>

package/components/layouts/headers/WebAppHeader.vue

@@ -1,54 +0,0 @@
-<template>
-    <header 
-        :class="[
-            'flex',
-            'items-center',
-            'justify-between',
-            'pt-12',
-            'pb-8',
-            'gap-3',
-            'px-content-side-padding-mobile md:px-content-side-padding',
-        ]"
-    >
-        <div class="flex gap-4">
-            <ActionIconButton 
-                :icon="isMobileSidebarOpen ? 'mdiMenuOpen' : 'mdiMenuClose'"
-                class="lg:hidden shadow-sm"
-                @click="toggleMobileSidebar"
-            />
-            <PageTitle class="hidden lg:flex" :type="pageTitleType"/>
-        </div>
-        <div class="flex gap-3 items-center xs:w-auto">
-            <slot name="header-actions" />
-        </div>
-    </header>
-
-</template>
-
-<script setup lang="ts">
-// Imports
-import { useRoute } from 'vue-router'
-
-// Props
-defineProps({
-    pageTitleType: {
-        type: String as PropType<PageTitleType>,
-        default: PageTitleType.SIMPLE
-    }
-})
-
-// Page title
-const route = useRoute()
-const currentPageTitle = computed<string>(() => 
-    (route.meta.title as string) || 'Page title'
-)
-
-// Dynamically set the page title
-useHead(() => ({
-    title: pageTitle(currentPageTitle.value, App.NAME),
-}))
-
-// Composables
-const { isMobileSidebarOpen, toggleMobileSidebar } = useMobileSidebar()
-
-</script>