SidebarCustomize

npx shadcn@latest add https://docs.nasaqui.com/r/sidebar-layout.json

import {
  useSidebarLayout, SidebarSortable, SidebarSortableItem, SidebarCustomize,
  type SidebarLayout, type SidebarCustomizeSection,
} from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

import {
  AppShell, Sidebar, SidebarContent, SidebarGroup, SidebarItem, SidebarFooter, Button,
  SidebarCustomize, SidebarSortable, SidebarSortableItem, useSidebarLayout,
} from "@fadymondy/nasaq/web";
import { Inbox, LayoutDashboard, ListTodo } from "lucide-react";
import { type ReactNode, useState } from "react";

type Entry = { id: string; label: string; icon: ReactNode; required?: boolean; href: string };

const ENTRIES: Entry[] = [
  { id: "dashboard", label: "Dashboard", icon: <LayoutDashboard />, required: true, href: "/" },
  { id: "inbox", label: "Inbox", icon: <Inbox />, href: "/inbox" },
  { id: "issues", label: "My issues", icon: <ListTodo />, href: "/issues" },
];

function AppSidebar() {
  const [customizing, setCustomizing] = useState(false);
  const layout = useSidebarLayout("my-app-nav", ENTRIES.map((e) => e.id));
  const byId = new Map(ENTRIES.map((e) => [e.id, e]));

  return (
    <Sidebar>
      <SidebarContent>
        <SidebarGroup>
          <SidebarSortable ids={layout.visible} onMove={layout.move}>
            {layout.visible.map((id) => {
              const entry = byId.get(id)!;
              return (
                <SidebarSortableItem key={id} id={id}>
                  <SidebarItem href={entry.href} icon={entry.icon}>{entry.label}</SidebarItem>
                </SidebarSortableItem>
              );
            })}
          </SidebarSortable>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <Button variant="ghost" size="sm" onClick={() => setCustomizing(true)}>Customize sidebar</Button>
      </SidebarFooter>
      <SidebarCustomize
        open={customizing}
        onOpenChange={setCustomizing}
        sections={[{ id: "main", items: ENTRIES, layout }]}
      />
    </Sidebar>
  );
}

export const Root = ({ children }: { children: ReactNode }) => <AppShell sidebar={<AppSidebar />}>{children}</AppShell>;

SidebarSortable                    (DndContext + SortableContext, vertical)
└─ SidebarSortableItem × n         data-slot="sidebar-sortable-item", data-dragging

SidebarCustomize                   Dialog (max-w-md)
├─ header                          title + description
├─ section × n                     <section aria-label={section.label}>, optional <h3>
│  └─ row × n                      <li>: drag handle <button>, icon, label, Switch
├─ live region                     aria-live="polite", sr-only: keyboard-move announcement
└─ footer                          "Reset to default" (ghost) · "Done" (primary)

useSidebarLayout(storageKey: string, ids: readonly string[]): SidebarLayout

import { SidebarCustomize, useSidebarLayout } from "@fadymondy/nasaq/web";

const MAIN = [{ id: "home", label: "الرئيسية", required: true }, { id: "inbox", label: "الوارد" }];
const TOOLS = [{ id: "time", label: "تتبع الوقت" }, { id: "teams", label: "الفرق" }];

export function Customize({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {
  const main = useSidebarLayout("app-nav-main", MAIN.map((i) => i.id));
  const tools = useSidebarLayout("app-nav-tools", TOOLS.map((i) => i.id));
  return (
    <SidebarCustomize
      open={open}
      onOpenChange={onOpenChange}
      sections={[
        { id: "main", items: MAIN, layout: main },
        { id: "tools", label: "الأدوات", items: TOOLS, layout: tools },
      ]}
      labels={{
        title: "تخصيص الشريط الجانبي",
        description: "اسحب لإعادة الترتيب، وأوقف العناصر لإخفائها.",
        reset: "استعادة الافتراضي",
        done: "تم",
        close: "إغلاق",
        reorder: (label) => `إعادة ترتيب ${label}`,
        moved: (label, n, total) => `${label}، الموضع ${n} من ${total}`,
      }}
    />
  );
}

import { DropdownMenuItem, UserMenu } from "@fadymondy/nasaq/web";
import { SlidersHorizontal } from "lucide-react";

export const Menu = ({ onCustomize }: { onCustomize: () => void }) => (
  <UserMenu user={{ name: "Fady Mondy", email: "[email protected]" }}>
    <DropdownMenuItem onClick={onCustomize}>
      <SlidersHorizontal />
      Customize sidebar
    </DropdownMenuItem>
  </UserMenu>
);