@imaginario27/air-ui-ds 1.0.0

package/components/navigation/nav-sidebar/BottomUserNavBar.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="w-full hidden lg:block">
+        <DropdownMenu 
+            class="border border-border-default"
+            positionClass="absolute bottom-[64px]"
+        >
+            <template #activator="{ onClick }">
+
+                 <!-- User Wrapper -->
+                <div 
+                    :class="[
+                        'w-full min-h-[64px]',
+                        'py-3',
+                        'px-6',
+                        'hover:cursor-pointer',
+                        'group',
+                        'flex',
+                        'items-center',
+                        'bg-background-surface',
+                    ]"
+                    @click="() => onClick()"
+                >
+                    <User 
+                        :displayName="userDisplayName" 
+                        isInteractive
+                        :imgUrl= "userAvatarUrl"
+                    />
+                </div>
+            </template>
+            <template #items="{ onClose }">
+                <DropdownMenuItem 
+                    v-for="item in menuItems" :key="item.text"
+                    :text="item.text"
+                    :actionType="item.actionType"
+                    :to="item.to"
+                    :type="item.type"
+                    :icon="item.icon"
+                    :imgUrl="item.imgUrl"
+                    :alt="item.alt"
+                    class="px-6 w-full"
+                    @click="() => {
+                        if(item.callback) {
+                            item.callback()
+                        }
+                        onClose()
+                    }"
+                />
+            </template>
+        </DropdownMenu>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props 
+defineProps({
+    userDisplayName: {
+        type: String as PropType<string>,
+        default: 'Test user'
+    },
+    userAvatarUrl: String as PropType<string>,
+    menuItems: {
+        type: Array as PropType<DropdownMenuItem[]>,
+        default: () => [
+            {
+                text: 'Account settings',
+                icon: 'mdiAccountCogOutline',
+            },
+            {
+                text: 'Support',
+                icon: 'mdiLifebuoy',
+                to: '/',
+            },
+            {
+                text: 'Logout',
+                icon: 'mdiLogout',
+                actionType: DropdownActionType.ACTION,
+                type: DropdownItemType.DANGER_ICON,
+                callback: () => {},
+            },
+        ],
+    },
+})
+</script>

package/components/navigation/nav-sidebar/NavSidebar.vue

@@ -0,0 +1,172 @@
+<template>
+    <!-- Nav Sidebar -->
+    <aside 
+        ref="sidebarRef"
+        :style="stickOnScroll && { top: isSticky ? '0px' : `${stickyScrollHeight}px` }"
+        :class="[
+            isFixed && 'fixed',
+            'w-[240px]',
+            'h-screen',
+            'bg-background-surface',
+            'flex flex-col items-center gap-6',
+            'py-4',
+            'border-r border-border-default',
+            'transition-transform duration-300',
+            isMobileSidebarOpen ? 'translate-x-0' : '-translate-x-full',
+            'lg:translate-x-0' // Always visible on large screens
+        ]"
+    >
+        <!-- Only for small screen width -->
+        <ActionIconButton 
+            v-if="hasCloseButton"
+            icon="mdiClose"
+            class="absolute top-3 right-3 sm:hidden"
+            :size="ButtonSize.SM"
+            @click="toggleMobileSidebar()"
+        />
+
+        <!-- Header -->
+        <slot name="sidebar-header" />
+        
+        <!-- Menu -->
+         
+        <NavSidebarMenu 
+            :class="[!$slots['sidebar-footer'] && '80% lg:90%']"
+            :style="{
+                height: computedMenuHeight
+            }"
+        >
+            <slot name="sidebar-menu-prefix-content" />
+            <template 
+                v-for="(item, index) in menuItems" 
+                :key="index"
+            >
+                <NavSidebarMenuSectionTitle 
+                    v-if="item.isSectionTitle" 
+                    :text="item.text" 
+                    :icon="item.icon"
+                    :styleType="itemsStyleType"
+                />
+                <NavSidebarMenuItem 
+                    v-else
+                    :text="item.text"
+                    :icon="item.icon"
+                    :to="item.to"
+                    :styleType="itemsStyleType"
+                    :class="itemsCustomClass"
+                />
+            </template>
+            <slot name="sidebar-menu-suffix-content" />
+        </NavSidebarMenu>
+
+        <!-- Footer -->
+        <div 
+            v-if="$slots['sidebar-footer']"
+            :class="[
+                'w-full',
+                'flex flex-col',
+                'absolute',
+            ]"
+            :style="{bottom: `${footerHeight}px`}"
+        >
+            <slot name="sidebar-footer" />
+        </div>
+    </aside>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    menuItems: {
+        type: Array as PropType<SidebarMenuItem[]>,
+        default: () => [
+            {
+                isSectionTitle: true,
+                text: 'Section title',
+                icon: 'mdiBullseye',
+            },
+            {
+                text: 'Item 1',
+                icon: 'mdiHelp',
+                to: '/',
+            },
+            {
+                text: 'Item 2',
+                icon: 'mdiHelp',
+                to: '/',
+            },
+            {
+                text: 'Item 3',
+                icon: 'mdiHelp',
+                to: '/',
+            },
+        ],
+
+    },
+    hasCloseButton: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    isFixed: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    stickOnScroll: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    stickyScrollHeight: {
+        type: Number as PropType<number>,
+        default: 0,
+    },
+    headerHeight: {
+        type: Number as PropType<number>,
+        default: 0,
+    },
+    footerHeight: Number as PropType<number>,
+    footerSafeAreaHeight: {
+        type: Number as PropType<number>,
+        default: 180,
+    },
+    itemsStyleType: String as PropType<SidebarNavMenuItemStyleType>,    
+    itemsCustomClass: String as PropType<string>
+})
+
+// States 
+const sidebarRef = ref<HTMLElement | null>(null)
+const isSticky = ref(false)
+
+// Slots
+const slots = defineSlots()
+
+// Composables
+const { isMobileSidebarOpen, toggleMobileSidebar } = useMobileSidebar()
+
+// Methods
+const handleScroll = () => {
+    if(props.stickOnScroll) {
+        isSticky.value = window.scrollY > props.stickyScrollHeight
+    }
+}
+
+// Dynamic height computation
+const computedMenuHeight = computed(() => {
+    if (slots['sidebar-footer']) {
+        return `calc(100% - ${props.footerSafeAreaHeight + props.headerHeight}px)`
+    } else {
+        return `calc(100% - ${props.headerHeight}px)`
+    }
+})
+
+onMounted(() => {
+    if(props.stickOnScroll) {
+        window.addEventListener('scroll', handleScroll)
+        handleScroll()
+    }
+})
+
+onUnmounted(() => {
+    if(props.stickOnScroll) {
+        window.removeEventListener('scroll', handleScroll)
+    }
+})
+</script>

package/components/navigation/nav-sidebar/NavSidebarMenu.vue

@@ -0,0 +1,14 @@
+<template>
+    <nav
+        :class="[
+            'flex',
+            'flex-col',
+            'gap-1',
+            'w-full',
+            'px-6',
+            'overflow-y-auto',
+        ]"
+    >
+        <slot />
+    </nav>
+</template>

package/components/navigation/nav-sidebar/NavSidebarMenuItem.vue

@@ -0,0 +1,76 @@
+<template>
+    <NuxtLink 
+        :to="to" 
+        :class="[
+            'flex',
+            'items-center',
+            'text-sm',
+            'font-semibold',
+            'rounded-lg',
+            'hover:bg-background-neutral-hover',
+            spacingClass,
+            isActive && 'text-text-primary-brand-on-neutral-hover-bg bg-background-neutral-hover',
+        ]"
+    >
+        <MdiIcon 
+            v-if="icon"
+            :icon
+            preserveAspectRatio="xMidYMid meet"
+            :class="['text-icon-neutral-subtler', iconSizeClass]"
+        />
+        <span :class="[!isActive && 'text-text-default']">
+            {{ text }}
+        </span>
+    </NuxtLink>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    text: {
+        type: String as PropType<string>,
+        default: 'Item text'
+    },
+    icon: String as PropType<any>,
+    to: {
+        type: String as PropType<string>,
+        default: null
+    },
+    isActive: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    styleType: {
+        type: String as PropType<SidebarNavMenuItemStyleType>,
+        default: SidebarNavMenuItemStyleType.COMPACT, 
+        validator: (value: SidebarNavMenuItemStyleType) => Object.values(SidebarNavMenuItemStyleType).includes(value),
+    },    
+    detectActive: {
+        type: Boolean,
+        default: true,
+    },
+})
+
+// Composables
+const route = useRoute()
+
+// Computed classes
+const spacingClass = computed(() => {
+    const variant = {
+        [SidebarNavMenuItemStyleType.SPACED]: 'min-h-[40px] gap-3 py-2 pl-3 pr-2',
+        [SidebarNavMenuItemStyleType.COMPACT]: 'gap-2 py-1 pl-2 pr-1',
+    }
+    return variant[props.styleType as SidebarNavMenuItemStyleType] || 'min-h-[40px] gap-2 py-2 pl-3 pr-2'
+})
+
+const iconSizeClass = computed(() => {
+    const variant = {
+        [SidebarNavMenuItemStyleType.SPACED]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [SidebarNavMenuItemStyleType.COMPACT]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+    }
+    return variant[props.styleType as SidebarNavMenuItemStyleType] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
+})
+
+const isActive = computed(() => {
+    return props.detectActive && route.path === props.to
+})
+</script>

package/components/navigation/nav-sidebar/NavSidebarMenuSectionTitle.vue

@@ -0,0 +1,54 @@
+<template>
+    <div 
+        :class="[
+        'flex',
+        'items-center',
+        'text-sm',
+        'font-semibold',
+        'text-text-neutral-subtle',
+        'border-b',
+        'border-border-neutral-subtle',
+        spacingClass,
+    ]"
+    >
+        <MdiIcon 
+            v-if="icon"
+            :icon
+            preserveAspectRatio="xMidYMid meet"
+            :class="['text-icon-neutral-subtle', iconSizeClass]"
+        />
+        {{ text }}
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    text: {
+        type: String as PropType<string>,
+        default: 'Item text'
+    },
+    icon: String as PropType<any>,
+    styleType: {
+        type: String as PropType<SidebarNavMenuItemStyleType>,
+        default: SidebarNavMenuItemStyleType.COMPACT, 
+        validator: (value: SidebarNavMenuItemStyleType) => Object.values(SidebarNavMenuItemStyleType).includes(value),
+    },
+})
+
+// Computed classes
+const spacingClass = computed(() => {
+    const variant = {
+        [SidebarNavMenuItemStyleType.SPACED]: 'min-h-[40px] gap-3 pt-4 pb-2 px-3',
+        [SidebarNavMenuItemStyleType.COMPACT]: 'gap-2 pt-3 pb-1 px-2',
+    }
+    return variant[props.styleType as SidebarNavMenuItemStyleType] || 'min-h-[40px] gap-2 pt-4 pb-2 px-3'
+})
+
+const iconSizeClass = computed(() => {
+    const variant = {
+        [SidebarNavMenuItemStyleType.SPACED]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [SidebarNavMenuItemStyleType.COMPACT]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+    }
+    return variant[props.styleType as SidebarNavMenuItemStyleType] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
+})
+</script>

package/components/navigation/table-of-contents/TableOfContents.vue

@@ -0,0 +1,35 @@
+<template>
+    <nav
+        class="w-full flex flex-col gap-2 text-sm"
+        aria-label="Table of contents"
+    >
+        <span
+            v-if="title"
+            class="font-semibold text-text-default mb-4"
+        >
+            {{ title }}
+        </span>
+        <ul class="w-full flex flex-col gap-2">
+            <TableOfContentsItem
+                v-for="(link, index) in links"
+                :key="index"
+                :link="link"
+                :activeId
+            />
+        </ul>
+    </nav>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    title: String as PropType<string>,
+    links: {
+        type: Array as PropType<TOCLink[]>,
+        default: () => [],
+    },
+})
+
+// Composable
+const { activeId } = useTableOfContents()
+</script>

package/components/navigation/table-of-contents/TableOfContentsItem.vue

@@ -0,0 +1,40 @@
+<template>
+    <li>
+        <a
+            :href="`#${link.id}`"
+            :class="[
+                'hover:text-text-primary-brand-hover',
+                'font-medium text-text-neutral-subtle',
+                link.depth !== 2 && 'pl-4',
+                activeId === link.id && 'text-text-primary-brand-active font-semibold',
+            ]"
+        >
+            {{ link.text }}
+        </a>
+        <ul
+            v-if="link.children?.length"
+            class="mt-1 space-y-1"
+        >
+            <TableOfContentsItem
+                v-for="(child, index) in link.children"
+                :key="index"
+                :link="child"
+                :activeId
+            />
+        </ul>
+    </li>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    link: {
+        type: Object as PropType<TOCLink>,
+        required: true,
+    },
+    activeId: {
+        type: String as PropType<string | null>,
+        default: null,
+    },
+})
+</script>

package/components/navigation/table-of-contents/TableOfContentsSidebar.vue

@@ -0,0 +1,29 @@
+<template>
+    <aside 
+        :class="[
+            'flex',
+            'flex-col',
+            'gap-3',
+            'w-full',
+            'max-w-[240px]',
+            'pt-12',
+            'pb-8',
+            'px-content-side-padding-mobile md:px-content-side-padding',
+            'bg-background-container-surface',
+            'h-screen',
+            'fixed right-0'
+        ]"
+    >
+        <TableOfContents
+            :title
+            :links
+        />
+    </aside>
+    
+</template>
+<script setup lang="ts">
+defineProps({
+    title: String as PropType<string>,
+    links: Array as PropType<TOCLink[]>,
+})
+</script>