昨天完成了 layout 後看起來方便很多了呢～

今天來做一點小小的改動，將原本寫在 layout 頁面的 sidebar 清單移出來方便未來資料管理，將 layout 單純作為模板（這樣就不用每次新增刪除元件都要改動 layout 這個檔案啦！）

• 新增 server/api/sidebar-item.ts

  把剛剛放在 demo-layout.vue 的選項清單移過來
  （這邊模擬清單內容可能是從 api 獲取的情境）

  //  server/api/sidebar-item.ts
  
  export const sidebarItem = [
    {
      title: '表單類',
      enable: true,
      isOpen: true,
      items: [
        { title: 'Button 按鈕', enable: true, url: '/Demo/button', icon: 'arcticons:accuweather' },
        { title: 'Input 輸入框', enable: true, url: '/Demo/input', icon: 'carbon:activity' },
        { title: 'Select 選擇框', enable: true, url: '/Demo/select', icon: 'arcticons:stack-exchange' },
        { title: 'Checkbox 複選', enable: true, url: '/Demo/checkbox', icon: 'carbon:3rd-party-connected' },
        { title: 'Radio 單選', enable: true, url: '/Demo/radio', icon: 'carbon:activity' },
        { title: 'Switch 開關', enable: true, url: '/Demo/switch', icon: 'carbon:aperture' },
      ]
    },
    {
      title: '小工具類',
      enable: true,
      items: [
        { title: 'Tabs 標籤', enable: true, url: '/Demo/tab', icon: 'arcticons:stack-exchange' },
        { title: 'Tooltip 提示', enable: true, url: '/Demo/tooltip', icon: 'carbon:activity' },
  
      ]
    }
  ]
  
  export default defineEventHandler((event) => {
    return sidebarItem
  })
  

• 在 layouts/demo-layout.vue 中改用 useFetch 來獲取清單內容

  const sidebarGroup: Ref<SidebarGroup[]> = ref([])
  
  await useFetch<SidebarGroup[]>('/api/sidebar-item').then((_sidebarItem) => {
    sidebarGroup.value = _sidebarItem.data.value ?? []  
  })
  

• 最後在 demo-layout 補一個圖片 logo

            <div class="flex items-center">
              <a class="navigation-logo" href="/">
  	              <div class="w-10 mr-2">
  	               <!-- 新增 logo -->
                    <img src="@/assets/images/seal.png" alt="logo">
                  </div>
                  我的 UI 元件庫
              </a>
              <div
                class="navigation-menu flex items-center pr-5 duration-150 ease-in hover:scale-125"
                @click="isSidebarFold = !isSidebarFold"
              >
                <Icon
                  name="mdi:arrow-collapse-right"
                  :class="{'rotate-180': isSidebarFold}"
                />
              </div>
            </div>
          </div>
  

  

• 這樣就完成嚕
  明天要開始整理元件準備 module !