pages._explore-components-structural-sidebar.title

pages._explore.sections.basic-usage.title

Active: dashboard

html

<Sidebar 
    :nav-items="basicNavItems" 
    :active-item="activeItem"
    @item-clicked="fnHandleItemClick"
>
    <template #logo>
        <Icon 
            name="solar:home-bold" 
            :color="IconColors.ON_SURFACE_RAISED" 
            :size="IconSizes.LG" 
        />
    </template>
</Sidebar>

typescript

<script setup lang="ts">
import { IconColors, IconSizes } from '#core-types/components/media/icon'

const activeItem = ref('dashboard')

const basicNavItems = ref({
    items: [
        { name: 'dashboard', route: '/dashboard', icon: 'solar:widget-bold' },
        { name: 'users', route: '/users', icon: 'solar:users-group-two-rounded-bold' },
        { name: 'settings', route: '/settings', icon: 'solar:settings-bold' }
    ]
})

const fnHandleItemClick = (item) => {
    activeItem.value = item.name
    console.log('Clicked:', item.name)
}
</script>

pages._explore.sections.complex-usage.title

Current Page: dashboard

Dashboard Content

Analytics OverviewView your key metrics and performance indicators.

Recent ActivityTrack your latest actions and updates.

html

<div class="flex h-96 border border-gray-300 rounded overflow-hidden">
    <Sidebar 
        :nav-items="complexNavItems" 
        :active-item="activeItem"
        @item-clicked="fnHandleItemClick"
    >
        <template #logo>
            <div class="flex items-center justify-center w-full h-full bg-primary rounded">
                <Text 
                    text="A" 
                    :color="TextColors.ON_PRIMARY" 
                    :weight="TextWeights.BOLD" 
                    :size="TextSizes.LG" 
                />
            </div>
        </template>
        
        <template #actions>
            <Tooltip 
                position="right" 
                content="User Profile"
            >
                <template #trigger>
                    <BaseButton 
                        icon="solar:user-bold" 
                        :color="BaseButtonColors.SURFACE_RAISED"
                        @triggered="fnOpenProfile"
                    />
                </template>
            </Tooltip>
            
            <Tooltip 
                position="right" 
                content="Notifications"
            >
                <template #trigger>
                    <BaseButton 
                        icon="solar:bell-bold" 
                        :color="BaseButtonColors.SURFACE_RAISED"
                        @triggered="fnOpenNotifications"
                    />
                </template>
            </Tooltip>
            
            <Tooltip 
                position="right" 
                content="Help & Support"
            >
                <template #trigger>
                    <BaseButton 
                        icon="solar:question-circle-bold" 
                        :color="BaseButtonColors.SURFACE_RAISED"
                        @triggered="fnOpenHelp"
                    />
                </template>
            </Tooltip>
            
            <Tooltip 
                position="right" 
                content="Sign Out"
            >
                <template #trigger>
                    <BaseButton 
                        icon="solar:logout-2-bold" 
                        :color="BaseButtonColors.ERROR"
                        @triggered="fnSignOut"
                    />
                </template>
            </Tooltip>
        </template>
    </Sidebar>

    <Content :scrollbar="true" class="flex-1">
        <div class="p-6">
            <Text 
                :text="`Current Page: ${activeItem}`" 
                :size="TextSizes.LG" 
                :weight="TextWeights.BOLD" 
                class="mb-4" 
            />
            
            <div v-if="activeItem === 'dashboard'" class="space-y-4">
                <Text text="Dashboard Content" :weight="TextWeights.MEDIUM" />
                <div class="grid grid-cols-2 gap-4">
                    <div class="p-4 bg-blue-50 rounded">
                        <Text text="Analytics Overview" :weight="TextWeights.MEDIUM" class="mb-2" />
                        <Text text="View your key metrics and performance indicators." :size="TextSizes.SM" />
                    </div>
                    <div class="p-4 bg-green-50 rounded">
                        <Text text="Recent Activity" :weight="TextWeights.MEDIUM" class="mb-2" />
                        <Text text="Track your latest actions and updates." :size="TextSizes.SM" />
                    </div>
                </div>
            </div>
            
            <div v-else-if="activeItem === 'projects'" class="space-y-4">
                <Text text="Projects Management" :weight="TextWeights.MEDIUM" />
                <Table 
                    :data="projectsData" 
                    :columns="projectsColumns"
                />
            </div>
            
            <div v-else-if="activeItem === 'team'" class="space-y-4">
                <Text text="Team Management" :weight="TextWeights.MEDIUM" />
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div 
                        v-for="member in teamMembers" 
                        :key="member.id"
                        class="p-4 border rounded-lg"
                    >
                        <div class="flex items-center gap-3 mb-2">
                            <Icon 
                                name="solar:user-bold" 
                                :color="IconColors.PRIMARY" 
                            />
                            <Text 
                                :text="member.name" 
                                :weight="TextWeights.MEDIUM" 
                            />
                        </div>
                        <Text 
                            :text="member.role" 
                            :color="TextColors.MUTED" 
                            :size="TextSizes.SM" 
                        />
                    </div>
                </div>
            </div>
            
            <div v-else-if="activeItem === 'analytics'" class="space-y-4">
                <Text text="Analytics Dashboard" :weight="TextWeights.MEDIUM" />
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div 
                        v-for="metric in analyticsMetrics" 
                        :key="metric.label"
                        class="p-4 text-center border rounded-lg"
                    >
                        <Text 
                            :text="metric.value" 
                            :size="TextSizes.XL2" 
                            :weight="TextWeights.BOLD" 
                            class="mb-1" 
                        />
                        <Text 
                            :text="metric.label" 
                            :size="TextSizes.SM" 
                            :color="TextColors.MUTED" 
                        />
                    </div>
                </div>
            </div>
            
            <div v-else class="space-y-4">
                <Text 
                    :text="`${activeItem.charAt(0).toUpperCase() + activeItem.slice(1)} Page`" 
                    :weight="TextWeights.MEDIUM" 
                />
                <Text 
                    text="This is a placeholder for the selected page content." 
                    :color="TextColors.MUTED" 
                />
            </div>
        </div>
    </Content>
</div>

typescript

<script setup lang="ts">
import { BaseButtonColors } from '#core-types/components/base/base-button'
import { IconColors } from '#core-types/components/media/icon'
import { TextColors, TextWeights, TextSizes } from '#core-types/components/presentational/text'

const activeItem = ref('dashboard')

const complexNavItems = ref({
    parent: {
        name: 'workspace',
        route: '/workspaces',
        icon: 'solar:widget-6-bold'
    },
    items: [
        { name: 'dashboard', route: '/dashboard', icon: 'solar:widget-bold' },
        { name: 'projects', route: '/projects', icon: 'solar:folder-bold' },
        { name: 'team', route: '/team', icon: 'solar:users-group-two-rounded-bold' },
        { name: 'analytics', route: '/analytics', icon: 'solar:chart-bold' },
        { name: 'documents', route: '/documents', icon: 'solar:document-text-bold' },
        { name: 'settings', route: '/settings', icon: 'solar:settings-bold' }
    ]
})

const projectsData = ref([
    { name: 'Website Redesign', status: 'Active', progress: '75%' },
    { name: 'Mobile App', status: 'Planning', progress: '25%' },
    { name: 'API Integration', status: 'Complete', progress: '100%' }
])

const projectsColumns = ref([
    { key: 'name', label: 'Project' },
    { key: 'status', label: 'Status' },
    { key: 'progress', label: 'Progress' }
])

const teamMembers = ref([
    { id: 1, name: 'Alice Johnson', role: 'Project Manager' },
    { id: 2, name: 'Bob Smith', role: 'Frontend Developer' },
    { id: 3, name: 'Carol Davis', role: 'Backend Developer' },
    { id: 4, name: 'David Wilson', role: 'UI/UX Designer' },
    { id: 5, name: 'Eva Brown', role: 'QA Engineer' },
    { id: 6, name: 'Frank Miller', role: 'DevOps Engineer' }
])

const analyticsMetrics = ref([
    { label: 'Users', value: '12.5K' },
    { label: 'Sessions', value: '8.2K' },
    { label: 'Bounce Rate', value: '32%' },
    { label: 'Conversion', value: '4.2%' }
])

const fnHandleItemClick = (item) => {
    activeItem.value = item.name
    console.log('Navigated to:', item.name)
}

const fnOpenProfile = () => {
    console.log('Opening user profile...')
}

const fnOpenNotifications = () => {
    console.log('Opening notifications...')
}

const fnOpenHelp = () => {
    console.log('Opening help & support...')
}

const fnSignOut = () => {
    console.log('Signing out...')
}
</script>

pages._explore.sections.props.title

Prop	Default	Type
navItems	undefined	SidebarNavItems
activeItem	""	string

pages._explore.sections.types.title

Name	Type	Options
SidebarProps	interface	Main props interface for Sidebar component
SidebarNavItems	interface	Navigation items structure with parent and items
SidebarNavItem	interface	Individual navigation item with name, route, and icon

pages._explore.sections.slots.title

Slot	Type
logo	Logo or brand element displayed at the top
actions	Additional action buttons displayed at the bottom

pages._explore.sections.emits.title

Event	Type
item-clicked