CSideNav

Menu điều hướng sidebar, sinh từ một mảng cấu hình. Tự tô sáng mục đang mở và tự mở nhóm cha chứa mục đó.

Dùng khi: tự dựng layout riêng cho dự án. App bình thường không gọi component này — layer đã lắp sẵn trong layout mặc định, dự án chỉ khai nav trong app.config.ts, xem Khung giao diện.

<script setup lang="ts">
import { h, ref } from 'vue'
import { IconChartBar, IconHome, IconShoppingCart } from '@tabler/icons-vue'
import type { NavItem } from '@tasco/ui'

// Menu sidebar sinh từ cấu hình. Router-agnostic: bấm item phát `navigate`,
// app tự điều hướng (trong Nuxt là navigateTo).
const items: NavItem[] = [
  { label: 'Trang chủ', path: '/', icon: () => h(IconHome, { size: 18 }) },
  { label: 'Đơn hàng', path: '/orders', icon: () => h(IconShoppingCart, { size: 18 }) },
  {
    label: 'Báo cáo',
    icon: () => h(IconChartBar, { size: 18 }),
    children: [
      { label: 'Doanh thu', path: '/reports/revenue' },
      { label: 'Tồn kho', path: '/reports/stock' },
    ],
  },
]

const activePath = ref('/orders')
const collapsed = ref(false)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <div style="display: flex; gap: 8px; align-items: center">
      <CButton
        size="sm"
        variant="outline"
        @click="collapsed = !collapsed"
      >
        {{ collapsed ? 'Mở rộng' : 'Thu gọn' }}
      </CButton>
      <span style="color: var(--tasco-color-text-muted)">
        Đường dẫn hiện tại: <code>{{ activePath }}</code>
      </span>
    </div>

    <div
      style="
        width: 248px;
        background: var(--tasco-color-sidebar-top);
        border-radius: var(--tasco-radius-lg);
        overflow: hidden;
      "
      :style="{ width: collapsed ? '64px' : '248px' }"
    >
      <CSideNav
        :items="items"
        :active-path="activePath"
        :collapsed="collapsed"
        @navigate="(path: string) => (activePath = path)"
      />
    </div>
  </div>
</template>

Cấu hình NavItem

import { h } from 'vue'
import { IconHome } from '@tabler/icons-vue'
import type { NavItem } from '@tasco/ui'

const items: NavItem[] = [
  { label: 'Trang chủ', path: '/', icon: () => h(IconHome, { size: 18 }) },
  {
    label: 'Báo cáo',
    children: [
      { label: 'Doanh thu', path: '/reports/revenue', permission: '/reports/revenue' },
    ],
  },
]

Field	Ý nghĩa
label	Nhãn hiển thị (bắt buộc)
path	Đường dẫn; nhóm cha có children thì bỏ trống
icon	Render function: () => h(IconHome, { size: 18 })
children	Menu con một cấp
permission	URI quyền — component không tự lọc, xem mục dưới
key	Khoá riêng; mặc định suy từ path/label

Mục đang mở

active-path quyết định mục nào sáng: component chọn item lá có path là tiền tố dài nhất của active-path. Nhờ vậy /orders/DH-0001 vẫn làm sáng mục /orders, và mục / không chiếm chỗ của mọi đường dẫn khác.

Trong app Nuxt: :active-path="route.path".

Điều hướng

Component không biết router: bấm mục có path chỉ phát @navigate(path).

<CSideNav :items="items" :active-path="route.path" @navigate="navigateTo" />

Lọc theo quyền

CSideNav hiển thị đúng những gì nhận được — lọc là việc của lớp gọi:

const { filterByPermission } = usePermission()
const nav = computed(() => filterByPermission(items))

Layout mặc định của layer đã làm sẵn bước này. Xem Chặn theo quyền.

Thu gọn

collapsed chuyển menu về chế độ chỉ còn icon (rộng 64px). Mục không có icon sẽ gần như không nhận ra được ở chế độ này — khai icon cho mọi mục cấp một.

API

Props

Tên	Kiểu	Mặc định	Mô tả
items*	NavItem[]	—	Cây menu; `icon` là render function của component icon.
activePath	string	''	Đường dẫn hiện tại để tô sáng item đúng.
collapsed	boolean	false	Chế độ thu gọn: chỉ còn icon.

Sự kiện

Tên	Payload	Mô tả
navigate	[path: string]	Bấm item có `path` — router-agnostic, layer gọi navigateTo.

Khả năng tiếp cận

• Menu render bằng a-menu của antd: điều hướng được bằng phím mũi tên, Enter để mở mục.
• Ở chế độ thu gọn, nhãn hiện qua tooltip của antd — vẫn đọc được bằng trình đọc màn hình.
• Icon là trang trí; nhãn chữ mới là thông tin. Đừng bỏ label để chỉ còn icon.

Lưu ý

• Chỉ hỗ trợ một cấp menu con. Cây sâu hơn là dấu hiệu nên tách module, không phải nên lồng thêm.
• icon: IconHome (truyền thẳng component) sẽ không hiển thị đúng — phải là render function.
• Nhiều mục cùng path thì mục nào cũng có thể sáng: đặt key riêng để tránh nhập nhằng.

Liên quan

• CTopNav — menu module ngang trên header.
• CAppLayout — khung chứa sidebar.
• Khung giao diện — cách khai menu trong app.