docs: app menu

README.md

@@ -93,6 +93,7 @@ export function render() {
   - [x] modal, drawer
 - [x] refine theme usage
 - [ ] inline-block(radio, checkbox, toggle) vertical-align
+- [ ] fix types check
 
 ## Naming Rules
 

docs/src/App.vue

@@ -48,9 +48,9 @@ import {
   createThemeWinter,
   createThemeWireframe,
 } from 'daisyui-vue';
-import { RouteRecordNormalized, RouterLink, useRoute } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { isBrowser } from './utils/index';
-import routes from '~pages';
+import AppMenuVue from './components/app/app-menu.vue';
 
 const DOC_THEMT_CACHE_KEY = '__DOCUMENT_THEME__';
 
@@ -80,30 +80,6 @@ export default defineComponent({
       localStorage.setItem(DOC_THEMT_CACHE_KEY, currentDocTheme.value);
     });
 
-    const { components } = (routes as any[]).reduce<{
-      components: RouteRecordNormalized[];
-    }>(
-      (rs, r: RouteRecordNormalized) => {
-        if (/^\/components\//.test(r.path)) {
-          rs.components.push(r);
-        }
-        return rs;
-      },
-      {
-        components: [] as RouteRecordNormalized[],
-      },
-    );
-
-    const componentsMenus = components
-      .sort((a, b) => (a.name as string).localeCompare(b.name as string))
-      .map((it) => (
-        <MenuItem childWrapper={false} key={it.path} class="capitalize">
-          <RouterLink to={it.path} activeClass="dv-active">
-            {(it.name as string).replace('components-', '')}
-          </RouterLink>
-        </MenuItem>
-      ));
-
     const themes = {
       light: createThemeLight(),
       dark: createThemeDark(),
@@ -150,10 +126,7 @@ export default defineComponent({
             v-slots={{
               default: () => (
                 <div class="overflow-y-auto w-80 dv-bgbase200 pb-6">
-                  <Menu class="dv-roundedbox p-4" compact>
-                    <MenuItem asTitle>Components</MenuItem>
-                    {componentsMenus}
-                  </Menu>
+                  <AppMenuVue />
                 </div>
               ),
               content: () => (

docs/src/components/app/app-menu.vue

@@ -1,10 +1,89 @@
 <script lang="tsx">
-import { defineComponent } from 'vue';
+import { Menu, MenuItem } from 'daisyui-vue';
+import { Fragment, defineComponent } from 'vue';
+import { RouteRecordRaw, RouterLink } from 'vue-router';
+import routes from '~pages';
+
+/**
+ * route meta:
+ *
+ * - name: final name
+ * - sort: number, default 5
+ * - menuHidden: not show in menu
+ */
 
 export default defineComponent({
   name: 'AppMenu',
   setup: () => {
-    return () => <div></div>;
+    const { rest, ...groups } = routes
+      .filter((it) => !it.meta?.menuHidden)
+      .sort((a, b) => {
+        const arr = [a, b];
+        const [sortA, sortB] = arr.map((it) => {
+          const num = Number(it.meta?.sort);
+          return Number.isFinite(num) ? num : 5;
+        });
+        const [nameA, nameB] = arr.map((it) => (it.name || '') as string);
+
+        if (sortA !== sortB) {
+          return sortA - sortB;
+        }
+
+        return nameA.localeCompare(nameB);
+      })
+      .reduce<{
+        rest: RouteRecordRaw[];
+        [k: string]: RouteRecordRaw[];
+      }>(
+        (rs, r) => {
+          if (/^\/components\//.test(r.path)) {
+            const cat = r.meta?.category as string;
+            if (cat) {
+              rs[cat] ||= [];
+              rs[cat].push(r);
+            } else {
+              rs.components.push(r);
+            }
+          } else {
+            rs.rest.push(r);
+          }
+          return rs;
+        },
+        {
+          rest: [],
+          components: [],
+        },
+      );
+    const groupsArr = Object.entries(groups);
+
+    const renderItem = (route: RouteRecordRaw) => {
+      const routeName =
+        (route.meta?.name as string) ||
+        (route.name as string)?.replace('components-', '') ||
+        '';
+
+      return (
+        <MenuItem childWrapper={false} key={route.path} class="capitalize">
+          <RouterLink to={route.path} activeClass="dv-active">
+            {routeName}
+          </RouterLink>
+        </MenuItem>
+      );
+    };
+
+    return () => (
+      <Menu class="dv-roundedbox p-4" compact>
+        {rest.map(renderItem)}
+        {groupsArr.map(([catName, catRoutes]) => (
+          <Fragment key={catName}>
+            <MenuItem asTitle>
+              <span class="capitalize">{catName}</span>
+            </MenuItem>
+            {catRoutes.map(renderItem)}
+          </Fragment>
+        ))}
+      </Menu>
+    );
   },
 });
 </script>

docs/src/pages/demo.md

@@ -1,3 +1,8 @@
+<route lang="yml">
+meta:
+  menuHidden: true
+</route>
+
 # Demo for development
 
 ```tsx :::run

docs/src/pages/index.vue

@@ -1,3 +1,9 @@
+<route lang="yml">
+meta:
+  name: Home
+  sort: 0
+</route>
+
 <script lang="tsx">
 import { useHead } from '@vueuse/head';