Menu Config#

The sidebar menu is configured in web/src/components/layout/sidebar.tsx.

Adding Menu Items#

tsximport { LayoutDashboard, CreditCard, Coins, FileText, CheckSquare } from "lucide-react"

const menuItems = [
  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { href: "/subscription", label: "Subscription", icon: CreditCard },
  { href: "/credits", label: "Credits", icon: Coins },
  { href: "/invoices", label: "Invoices", icon: FileText },
  { href: "/todos", label: "Todos", icon: CheckSquare },
]

Role Filtering#

Admin menu is only visible to owner role:

tsximport { useUserStore } from "@/lib/stores/user"

const { user } = useUserStore()
const isOwner = user?.role === "owner"

{isOwner && (
  <SidebarGroup title="Management">
    <SidebarItem href="/owner/users" icon={Users}>Users</SidebarItem>
  </SidebarGroup>
)}

Dynamic Filtering#

Menu items show/hide based on useWebsiteStore config:

• config.subscription.enabled = false → Hide subscription menu
• config.credit.enabled = false → Hide credits menu

Icons#

Uses Lucide React:

tsximport { LayoutDashboard, CheckSquare } from "lucide-react"