@imaginario27/air-ui-ds 1.0.20 → 1.0.22

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

@@ -2,10 +2,12 @@
     <!-- Nav Sidebar -->
     <aside 
         ref="sidebarRef"
-        :style="stickOnScroll && { top: isSticky ? '0px' : `${stickyScrollHeight}px` }"
+        :style="{
+            top: stickOnScroll ? (isSticky ? '0px' : `${stickyScrollHeight}px`) : undefined,
+            width: `${isCollapsed ? collapsedWidth : expandedWidth}px`,
+        }"
         :class="[
             isFixed && 'fixed',
-            'w-[240px]',
             'h-screen',
             'bg-background-surface',
             'flex flex-col items-center gap-6',
@@ -13,52 +15,155 @@
             '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
+            '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()"
-        />
-
+        <!-- Collapse & Close Buttons -->
+        <div 
+            v-if="showMobileSidebarClose || (showCollapseToggle && collapseTogglePosition === Position.TOP)"
+            :class="[
+                'absolute',
+                'top-3',
+                'right-3',
+            ]"
+        >
+            <div class="flex gap-2">
+                <!-- Mobile sidebar toggler -->
+                <ActionIconButton 
+                    v-if="showMobileSidebarClose && isMobile && !isCollapsed"
+                    :icon="mobileSidebarCloseIcon"
+                    class="flex sm:hidden"
+                    :size="ButtonSize.SM"
+                    @click="toggleMobileSidebar()"
+                />
+    
+                <!-- Collapse toggle button -->
+                <ActionIconButton 
+                    v-if="showCollapseToggle && collapseTogglePosition === Position.TOP && !isCollapsed"
+                    :icon="expandedStateIcon"
+                    :size="ButtonSize.SM"
+                    @click="toggleSidebarState(sidebarId)"
+                />
+            </div>
+        </div>
+        
         <!-- Header -->
         <slot name="sidebar-header" />
         
         <!-- Menu -->
-         
         <NavSidebarMenu 
-            :class="[!$slots['sidebar-footer'] && '80% lg:90%']"
+            :isCollapsed
+            :class="[
+                !$slots['sidebar-footer'] && '80% lg:90%',
+                isCollapsed && '!px-0 items-center',
+            ]"
             :style="{
                 height: computedMenuHeight
             }"
         >
+             <!-- Collapse toggle item shown only in collapsed state -->
+            <ActionIconButton 
+                v-if="showCollapseToggle && collapseTogglePosition === Position.TOP && isCollapsed"
+                :icon="collapsedStateIcon"
+                :size="ButtonSize.SM"
+                class="mb-2"
+                @click="toggleSidebarState(sidebarId)"
+            />
+
             <slot name="sidebar-menu-prefix-content" />
-            <template 
-                v-for="(item, index) in menuItems" 
-                :key="index"
-            >
+
+            <template v-for="(item, index) in menuItems" :key="index">
+                <!-- Section Title -->
                 <NavSidebarMenuSectionTitle 
-                    v-if="item.isSectionTitle" 
-                    :text="item.text" 
-                    :icon="item.icon"
-                    :styleType="itemsStyleType"
-                />
-                <NavSidebarMenuItem 
-                    v-else
+                    v-if="item.isSectionTitle"
                     :text="item.text"
                     :icon="item.icon"
-                    :to="item.to"
                     :styleType="itemsStyleType"
-                    :class="itemsCustomClass"
+                    :isCollapsed
+                    :showCollapseDivider
                 />
+
+                <!-- Collapsed Dropdown using NavSidebarMenuItem as activator -->
+                <template v-else-if="isCollapsed && item.children">
+                    <DropdownMenu
+                        :key="item.text"
+                        :position="index < props.collapsedFlipLimit ? DropdownPosition.RIGHT_TOP : DropdownPosition.RIGHT_BOTTOM"
+                        :positionXOffset="collapsedSubmenuOffset"
+                        :style="{ minWidth: `${collapsedSubmenuWidth}px` }"
+                    >
+                        <!-- Use NavSidebarMenuItem as activator -->
+                        <template #activator="{ onClick }">
+                            <NavSidebarMenuItem 
+                                :text="item.text"
+                                :icon="item.icon"
+                                :styleType="itemsStyleType"
+                                isCollapsed
+                                :showDropdownArrow="false"
+                                :class="itemsCustomClass"
+                                @click="onClick"
+                            />
+                        </template>
+
+                        <template #items>
+                            <DropdownMenuItem
+                                v-for="(child, childIndex) in item.children"
+                                :key="`${item.text}-${childIndex}`"
+                                :text="child.text"
+                                :type="child.icon ? DropdownItemType.ICON : DropdownItemType.TEXT"
+                                :icon="child.icon"
+                                :to="child.to"
+                            />
+                        </template>
+                    </DropdownMenu>
+                </template>
+
+                <!-- Regular item if not collapsed or no children -->
+                <template v-else>
+                    <NavSidebarMenuItem 
+                        :text="item.text"
+                        :icon="item.icon"
+                        :to="item.to"
+                        :styleType="itemsStyleType"
+                        :showDropdownArrow="!!item.children"
+                        :isOpen="openItems[index]"
+                        :isCollapsed
+                        :class="itemsCustomClass"
+                        @click="item.children ? toggleItem(index) : undefined"
+                    />
+
+                    <!-- Render nested children only when expanded -->
+                    <template v-if="item.children && openItems[index] && !isCollapsed">
+                        <NavSidebarMenuItem
+                            v-for="(child, childIndex) in item.children"
+                            :key="`${index}-${childIndex}`"
+                            :text="child.text"
+                            :icon="child.icon"
+                            :to="child.to"
+                            :styleType="itemsStyleType"
+                            :class="[
+                                itemsCustomClass,
+                                'ml-4',
+                                '!font-medium',
+                            ]"
+                        />
+                    </template>
+                </template>
             </template>
+
             <slot name="sidebar-menu-suffix-content" />
         </NavSidebarMenu>
 
+        <!-- Collapse toggle button at bottom -->
+        <ActionIconButton 
+            v-if="showCollapseToggle && collapseTogglePosition === Position.BOTTOM"
+            :icon="isCollapsed ? collapsedStateIcon : expandedStateIcon"
+            :size="ButtonSize.SM"
+            :class="[
+                isCollapsed ? '' : 'absolute right-3 bottom-3'
+            ]"
+            @click="toggleSidebarState(sidebarId)"
+        />
+
         <!-- Footer -->
         <div 
             v-if="$slots['sidebar-footer']"
@@ -76,6 +181,10 @@
 <script setup lang="ts">
 // Props
 const props = defineProps({
+    sidebarId: {
+        type: String as PropType<string>,
+        required: true,
+    },
     menuItems: {
         type: Array as PropType<SidebarMenuItem[]>,
         default: () => [
@@ -97,15 +206,78 @@ const props = defineProps({
             {
                 text: 'Item 3',
                 icon: 'mdiHelp',
-                to: '/',
+                children: [
+                    {
+                        text: 'Subitem 1',
+                        icon: 'mdiHelp',
+                        to: '/',
+                    },
+                    {
+                        text: 'Subitem 2',
+                        icon: 'mdiHelp',
+                        to: '/',
+                    },
+                ],
             },
         ],
-
     },
-    hasCloseButton: {
+    expandedWidth: {
+        type: Number as PropType<number>,
+        default: 240
+    },
+    collapsedWidth: {
+        type: Number as PropType<number>,
+        default: 60
+    },
+    multipleSubmenusOpen: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    isCollapsed: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    showCollapseDivider: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    collapsedSubmenuOffset: {
+        type: Number as PropType<number>,
+        default: 20,
+    },
+    collapsedSubmenuWidth: {
+        type: Number as PropType<number>,
+        default: 200,
+    },
+    collapsedFlipLimit: {
+        type: Number as PropType<number>,
+        default: 8,
+    },
+    showCollapseToggle: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    collapseTogglePosition: {
+        type: String as PropType<Position>,
+        default: Position.BOTTOM,
+        validator: (value: Position) => Object.values(Position).includes(value),
+    },
+    collapsedStateIcon: {
+        type: String as PropType<string>,
+        default: 'mdiMenuClose',
+    },
+    expandedStateIcon: {
+        type: String as PropType<string>,
+        default: 'mdiMenuOpen',
+    },
+    showMobileSidebarClose: {
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    mobileSidebarCloseIcon: {
+        type: String as PropType<string>,
+        default: 'mdiClose',
+    },
     isFixed: {
         type: Boolean as PropType<boolean>,
         default: true,
@@ -127,19 +299,32 @@ const props = defineProps({
         type: Number as PropType<number>,
         default: 180,
     },
-    itemsStyleType: String as PropType<SidebarNavMenuItemStyleType>,    
+    itemsStyleType: {
+        type: String as PropType<SidebarNavMenuItemStyleType>,
+        default: SidebarNavMenuItemStyleType.COMPACT, 
+        validator: (value: SidebarNavMenuItemStyleType) => Object.values(SidebarNavMenuItemStyleType).includes(value),
+    },    
     itemsCustomClass: String as PropType<string>
 })
 
 // States 
-const sidebarRef = ref<HTMLElement | null>(null)
 const isSticky = ref(false)
+const openItems = ref<Record<number, boolean>>({})
+
+// Emits
+const emit = defineEmits<(e: 'update:isCollapsed', value: boolean) => void>()
 
 // Slots
 const slots = defineSlots()
 
 // Composables
 const { isMobileSidebarOpen, toggleMobileSidebar } = useMobileSidebar()
+const {
+    isSidebarCollapsed,
+    setSidebarCollapsed,
+    toggleSidebarState,
+} = useSidebar()
+const { isMobile } = useIsMobile()
 
 // Methods
 const handleScroll = () => {
@@ -148,7 +333,23 @@ const handleScroll = () => {
     }
 }
 
-// Dynamic height computation
+const toggleItem = (index: number) => {
+    if (props.multipleSubmenusOpen) {
+        openItems.value[index] = !openItems.value[index]
+    } else {
+        const wasOpen = openItems.value[index]
+
+        // Close all
+        openItems.value = {}
+
+        // Reopen the one that was toggled if it wasn't already open
+        if (!wasOpen) {
+            openItems.value[index] = true
+        }
+    }
+}
+
+// Computed
 const computedMenuHeight = computed(() => {
     if (slots['sidebar-footer']) {
         return `calc(100% - ${props.footerSafeAreaHeight + props.headerHeight}px)`
@@ -157,6 +358,9 @@ const computedMenuHeight = computed(() => {
     }
 })
 
+// Constants
+const isCollapsed = isSidebarCollapsed(props.sidebarId)
+
 onMounted(() => {
     if(props.stickOnScroll) {
         window.addEventListener('scroll', handleScroll)
@@ -169,4 +373,21 @@ onUnmounted(() => {
         window.removeEventListener('scroll', handleScroll)
     }
 })
+
+// Sync collapsed props with global sidebar state
+watch(
+    () => props.isCollapsed,
+    (newVal) => {
+        setSidebarCollapsed(props.sidebarId, newVal)
+    },
+    { immediate: true }
+)
+
+// Update parent when local isCollapsed changes
+watch(
+    isCollapsed,
+    (newVal) => {
+        emit('update:isCollapsed', newVal)
+    }
+)
 </script>

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

@@ -6,9 +6,18 @@
             'gap-1',
             'w-full',
             'px-6',
-            'overflow-y-auto',
+            !isCollapsed && 'overflow-y-auto',
         ]"
     >
         <slot />
     </nav>
-</template>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    isCollapsed: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    }, 
+})
+</script>

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

@@ -1,6 +1,6 @@
 <template>
     <NuxtLink 
-        :to="to" 
+        :to
         :class="[
             'flex',
             'items-center',
@@ -8,19 +8,41 @@
             'font-semibold',
             'rounded-lg',
             'hover:bg-background-neutral-hover',
+            'justify-between',
             spacingClass,
             isActive && 'text-text-primary-brand-on-neutral-hover-bg bg-background-neutral-hover',
         ]"
+        @click="$emit('click')"
     >
+        <div
+            :class="[
+                'w-full',
+                'flex',
+                'items-center',
+                gapClass,
+            ]"
+        >
+            <MdiIcon 
+                v-if="icon"
+                :icon
+                preserveAspectRatio="xMidYMid meet"
+                :class="['text-icon-neutral-subtler', iconSizeClass]"
+            />
+
+            <span 
+                v-if="!isCollapsed"
+                :class="[!isActive && 'text-text-default']"
+            >
+                {{ text }}
+            </span>
+        </div>
+
         <MdiIcon 
-            v-if="icon"
-            :icon
+            v-if="showDropdownArrow && !isCollapsed"
+            :icon="isOpen ? 'mdiChevronUp' : 'mdiChevronDown'"
             preserveAspectRatio="xMidYMid meet"
-            :class="['text-icon-neutral-subtler', iconSizeClass]"
+            :class="['text-icon-default', iconSizeClass]"
         />
-        <span :class="[!isActive && 'text-text-default']">
-            {{ text }}
-        </span>
     </NuxtLink>
 </template>
 <script setup lang="ts">
@@ -35,38 +57,79 @@ const props = defineProps({
         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,
+        type: Boolean as PropType<boolean>,
         default: true,
     },
+    showDropdownArrow: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    isOpen: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    isCollapsed: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
 })
 
+// Emits 
+defineEmits(['click'])
+
 // Composables
 const route = useRoute()
 
 // Computed classes
 const spacingClass = computed(() => {
+    if (props.isCollapsed) {
+        const collapsedVariant = {
+            [SidebarNavMenuItemStyleType.SPACED]: 'p-3',
+            [SidebarNavMenuItemStyleType.COMPACT]: 'p-2',
+        }
+
+        return collapsedVariant[props.styleType as SidebarNavMenuItemStyleType] || 'p-2'
+    }
+
+    const variant = {
+        [SidebarNavMenuItemStyleType.SPACED]: 'min-h-[40px] py-2 pl-3 pr-2',
+        [SidebarNavMenuItemStyleType.COMPACT]: 'py-1 pl-2 pr-1',
+    }
+
+    return variant[props.styleType as SidebarNavMenuItemStyleType] || 'min-h-[40px] py-2 pl-3 pr-2'
+})
+
+const gapClass = 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',
+        [SidebarNavMenuItemStyleType.SPACED]: 'gap-3',
+        [SidebarNavMenuItemStyleType.COMPACT]: 'gap-2',
     }
-    return variant[props.styleType as SidebarNavMenuItemStyleType] || 'min-h-[40px] gap-2 py-2 pl-3 pr-2'
+    return variant[props.styleType as SidebarNavMenuItemStyleType] || 'gap-3'
 })
 
+
 const iconSizeClass = computed(() => {
+    if (props.isCollapsed) {
+        const collapsedVariant = {
+            [SidebarNavMenuItemStyleType.SPACED]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+            [SidebarNavMenuItemStyleType.COMPACT]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        }
+
+        return collapsedVariant[props.styleType as SidebarNavMenuItemStyleType] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
+    }
+
+    // Regular size
     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]'
 })
 

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

@@ -1,5 +1,6 @@
 <template>
     <div 
+        v-if="!isCollapsed"
         :class="[
         'flex',
         'items-center',
@@ -17,8 +18,12 @@
             preserveAspectRatio="xMidYMid meet"
             :class="['text-icon-neutral-subtle', iconSizeClass]"
         />
-        {{ text }}
+
+        <span>
+            {{ text }}
+        </span>
     </div>
+    <Divider v-if="isCollapsed && showCollapseDivider" />
 </template>
 <script setup lang="ts">
 // Props
@@ -33,6 +38,14 @@ const props = defineProps({
         default: SidebarNavMenuItemStyleType.COMPACT, 
         validator: (value: SidebarNavMenuItemStyleType) => Object.values(SidebarNavMenuItemStyleType).includes(value),
     },
+    isCollapsed: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    showCollapseDivider: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
 })
 
 // Computed classes

package/components/progress/ProgressBar.vue

@@ -0,0 +1,194 @@
+<template>
+    <div
+        class="w-full space-y-1.5"
+    >
+        <div
+            v-if="showProgressLabel && progressLabelPosition === Position.TOP"
+            :class="[
+                'text-xs text-text-neutral-subtle',
+                labelAlignmentClass,
+                progressLabelClass,
+            ]"
+        >
+            {{ isIndeterminate ? loadingText : `${normalizedProgress}%` }}
+        </div>
+
+        <div
+            :class="[
+                'w-full',
+                'overflow-hidden',
+                barSizeClass,
+                incompleteBackgroundColorClass,
+                isRounded && 'rounded-full',
+                'relative',
+            ]"
+        >
+            <div
+                v-if="!isIndeterminate && normalizedProgress > 0"
+                :class="[
+                    'h-full',
+                    'transition-all',
+                    'duration-300',
+                    'ease-in-out',
+                    isRounded && 'rounded-full',
+                    completedBackgroundColorClass,
+                    progressClass,
+                ]"
+                :style="{ width: `${normalizedProgress}%` }"
+            />
+
+            <div
+                v-else-if="isIndeterminate"
+                :class="[
+                    'absolute top-0 left-0 h-full w-1/3',
+                    'indeterminate-bar',
+                    isRounded && 'rounded-full',
+                    completedBackgroundColorClass,
+                    progressClass,
+                ]"
+            />
+        </div>
+
+        <div
+            v-if="showProgressLabel && progressLabelPosition === Position.BOTTOM"
+            :class="[
+                'text-xs text-text-neutral-subtle',
+                labelAlignmentClass,
+                progressLabelClass,
+            ]"
+        >
+            {{ isIndeterminate ? loadingText : `${normalizedProgress}%` }}
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    progress: {
+        type: Number as PropType<number>,
+        default: 50,
+    },
+    color: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.PRIMARY_BRAND, 
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    size: {
+        type: String as PropType<ProgressBarSize>,
+        default: ProgressBarSize.SM, 
+        validator: (value: ProgressBarSize) => Object.values(ProgressBarSize).includes(value),
+    },
+    isRounded: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    showProgressLabel: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    progressLabelPosition: {
+        type: String as PropType<Position>,
+        default: Position.TOP,
+        validator: (value: Position) => Object.values(Position).includes(value),
+    },
+    progressLabelAlignment: {
+        type: String as PropType<Align>,
+        default: Align.CENTER,
+        validator: (value: Align) => Object.values(Align).includes(value),
+    },
+    min: {
+        type: Number as PropType<number>,
+        default: 0,
+    },
+    max: {
+        type: Number as PropType<number>,
+        default: 100,
+    },
+    isIndeterminate: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    loadingText: {
+        type: String as PropType<string>,
+        default: 'Loading...',
+    },
+    progressClass: String as PropType<string>,
+    progressLabelClass: String as PropType<string>,
+})
+
+// Computed
+const normalizedProgress = computed(() => {
+    if (props.isIndeterminate) return 100
+
+    const clamped = Math.min(Math.max(props.progress, props.min), props.max)
+    const percent = ((clamped - props.min) / (props.max - props.min)) * 100
+
+    return Math.round(percent)
+})
+
+// Computed classes
+const barSizeClass = computed(() => {
+    const variants = {
+        [ProgressBarSize.XS]: 'h-[4px]',
+        [ProgressBarSize.SM]: 'h-[8px]',
+        [ProgressBarSize.MD]: 'h-[12px]',
+        [ProgressBarSize.LG]: 'h-[16px]',
+        [ProgressBarSize.XL]: 'h-[20px]',
+    }
+
+    return variants[props.size as ProgressBarSize] || 'h-[8px]'
+})
+
+const incompleteBackgroundColorClass = computed(() => {
+    const variants = {
+        [ColorAccent.NEUTRAL]: 'bg-background-neutral-default/10',
+        [ColorAccent.SUCCESS]: 'bg-background-success-bold/10',
+        [ColorAccent.WARNING]: 'bg-background-warning-bold/10',
+        [ColorAccent.DANGER]: 'bg-background-danger-bold/10',
+        [ColorAccent.INFO]: 'bg-background-info-bold/10',
+        [ColorAccent.PRIMARY_BRAND]: 'bg-background-primary-brand-default/10',
+        [ColorAccent.SECONDARY_BRAND]: 'bg-background-secondary-brand-default/10',
+    }
+
+    return variants[props.color as ColorAccent] || 'bg-background-primary-brand-default/10'
+})
+
+const completedBackgroundColorClass = computed(() => {
+    const variants = {
+        [ColorAccent.NEUTRAL]: 'bg-background-neutral-default',
+        [ColorAccent.SUCCESS]: 'bg-background-success-bold',
+        [ColorAccent.WARNING]: 'bg-background-warning-bold',
+        [ColorAccent.DANGER]: 'bg-background-danger-bold',
+        [ColorAccent.INFO]: 'bg-background-info-bold',
+        [ColorAccent.PRIMARY_BRAND]: 'bg-background-primary-brand-default',
+        [ColorAccent.SECONDARY_BRAND]: 'bg-background-secondary-brand-default',
+    }
+
+    return variants[props.color as ColorAccent] || 'bg-background-primary-brand-default'
+})
+
+const labelAlignmentClass = computed(() => {
+    const variants = {
+        [Align.LEFT]: 'text-left',
+        [Align.CENTER]: 'text-center',
+        [Align.RIGHT]: 'text-right',
+    }
+
+    return variants[props.progressLabelAlignment as Align] || 'text-center'
+})
+</script>
+
+<style scoped>
+@keyframes indeterminate-slide {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(300%);
+    }
+}
+
+.indeterminate-bar {
+    animation: indeterminate-slide 2s ease-in-out infinite;
+}
+</style>

package/composables/useSidebar.ts

@@ -0,0 +1,41 @@
+const sidebarStates = reactive<Record<string, boolean>>({})
+
+export const useSidebar = () => {
+    const { isMobile } = useIsMobile()
+
+    const toggleSidebarState = (id: string) => {
+        sidebarStates[id] = !sidebarStates[id]
+    }
+
+    const expandSidebar = (id: string) => {
+        sidebarStates[id] = false
+    }
+
+    const collapseSidebar = (id: string) => {
+        sidebarStates[id] = true
+    }
+
+    const setSidebarCollapsed = (id: string, collapsed: boolean) => {
+        sidebarStates[id] = collapsed
+    }
+
+    const isSidebarCollapsed = (id: string) => {
+        return computed(() => sidebarStates[id] ?? false)
+    }
+
+    watch(isMobile, (newVal) => {
+        if (!newVal) {
+            for (const key in sidebarStates) {
+                sidebarStates[key] = false
+            }
+        }
+    })
+
+    return {
+        isSidebarCollapsed,
+        setSidebarCollapsed,
+        toggleSidebarState,
+        expandSidebar,
+        collapseSidebar,
+    }
+}

package/models/enums/navigation.ts

@@ -9,5 +9,5 @@ export enum NavLinkSize {
 
 export enum SidebarNavMenuItemStyleType {
     SPACED = 'spaced',
-    COMPACT = 'sidebar',
+    COMPACT = 'compact',
 }

package/models/enums/progress.ts

@@ -0,0 +1,7 @@
+export enum ProgressBarSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl'
+}

package/models/types/navigation.ts

@@ -14,4 +14,5 @@ export interface SidebarMenuItem {
     icon?: string
     to?: string
     isSectionTitle?: boolean
+    children?: SidebarMenuItem[]
 }

package/package.json

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