Setup

1. jalankan printah

npm install @microv/dashboard react-router-dom

2. buat file "microvConfig.ts" dengan isi :

import { MenuIcon, TerminalIcon } from "lucide-react"
import { DashboardData } from "@microv/dashboard"

DashboardData({
  brand: {
    icon: TerminalIcon,
    title: "Test 1",
    description: "Test Satu",
  },
  menus: {
    groups: [
      {
        label: "groups 1",
        items: [
          {
            title: "Menu 1",
            url: "#",
            icon: MenuIcon,
            variant: "default",
          },
          {
            title: "Menu 2",
            url: "#",
            icon: MenuIcon,
            variant: "default",
          },
          {
            title: "Menu 3",
            icon: MenuIcon,
            variant: "collapsible",
            items: [
              {
                title: "Menu 3.1",
                url: "#",
                icon: MenuIcon,
                variant: "default",
              },
              {
                title: "Menu 3.2",
                url: "#",
                icon: MenuIcon,
                variant: "default",
              },
            ],
          },
        ],
      },
      {
        lable: "groups 2",
        items: [
          {
            title: "Menu 4",
            url: "#",
            icon: MenuIcon,
            variant: "default",
          },
          {
            title: "Menu 5",
            icon: MenuIcon,
            variant: "collapsible",
            items: [
              {
                title: "Menu 5.1",
                url: "#",
                icon: MenuIcon,
                variant: "default",
              },
              {
                title: "Menu 5.2",
                url: "#",
                icon: MenuIcon,
                variant: "default",
              },
            ],
          },
          {
            title: "Menu 6",
            url: "#",
            icon: MenuIcon,
            variant: "default",
          },
        ],
      },
    ],
  },
  footer: {
    // label: "footer",
    items: [
      {
        title: "Menu 7",
        url: "#",
        icon: MenuIcon,
      },
      {
        title: "Menu 8",
        url: "#",
        icon: MenuIcon,
      },
    ],
  },
})

3. update file "main.tsx" dengan code :

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { BrowserRouter } from "react-router-dom"

import "./index.css"
import App from "./App.tsx"
import { ThemeProvider } from "@/components/theme-provider.tsx"

import "../microvConfig"
import { LayoutDashboard } from "@microv/dashboard"
import.meta.glob("./pages/**/*.{ts,tsx,js,jsx}", { eager: true })

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <ThemeProvider>
        <LayoutDashboard footer={true} menusPage={false}>
          <App />
        </LayoutDashboard>
      </ThemeProvider>
    </BrowserRouter>
  </StrictMode>
)

Menu Sidebar

ada dua cara menampilkan menu di sidebar , yang pertama melalui file "microvConfig.ts" dan melaui file page didalam folder "pages".

via file "microvConfig.ts"

tambahkan bagian berikut :

....

DashboardData({
  ....
  menus: {
    groups: [
      {
        label: "groups 1",
        items: [
          {
            title: "Menu 1",
            url: "#",
            icon: MenuIcon,
            variant: "default",
          },
          {
            title: "Menu 2",
            url: "#",
            icon: MenuIcon,
            variant: "default",
          },
          {
            title: "Menu 3",
            icon: MenuIcon,
            variant: "collapsible",
            items: [
              {
                title: "Menu 3.1",
                url: "#",
                icon: MenuIcon,
                variant: "default",
              },
              {
                title: "Menu 3.2",
                url: "#",
                icon: MenuIcon,
                variant: "default",
              },
            ],
          },
        ],
      },
      {
        lable: "groups 2",
        items: [
          {
            title: "Menu 4",
            url: "#",
            icon: MenuIcon,
            variant: "default",
          },
          {
            title: "Menu 5",
            icon: MenuIcon,
            variant: "collapsible",
            items: [
              {
                title: "Menu 5.1",
                url: "#",
                icon: MenuIcon,
                variant: "default",
              },
              {
                title: "Menu 5.2",
                url: "#",
                icon: MenuIcon,
                variant: "default",
              },
            ],
          },
          {
            title: "Menu 6",
            url: "#",
            icon: MenuIcon,
            variant: "default",
          },
        ],
      },
    ],
  },
  ....
})

via file didalam folder "pages"

buat file didalam folder "src/pages/" dengan nama contohnya "dashboard.tsx" lalu buat seperti berikut :

import { PageRegister } from "@microv/dashboard"
import { MenuIcon } from "lucide-react"

PageRegister({
  title: "Dashboard",
  icon: <MenuIcon />,
  url: "/dashboard",
  groupMenu: "Group 1",
  groupNumber: 1,
  variantMenu: "default",
  itemNumber: 1,
})
export default function DashboardPage() {
  return <div>dashboard</div>
}

lalu pada file "main.tsx" pastikan "menuPage" nya "true"

<LayoutDashboard footer={true} menusPage={true}>
    <App />
</LayoutDashboard>

title: "Dashboard" nilai didalam property title akan menjadi title pada menu icon: nilai didalam property icon akan menjadi icon pada menu url: "/dashboard" nilai pada url akan menjadi url pada menu groupMenu: "Group 1" setiap page yang memeiliki nilai yang sama pada property groupMenu akan menjadi satu group groupNumber: 1 nilai pada property ini akan mengurutkan gruop menu dari kecil kebesar itemNumber: 1 nilai pada property ini akan mengurutkan item pada group menu nya variantMenu: "default" variant menu menjadi pilihan tampilan menu ada 3 pilihan (default, collaps, dan action)