@wikex/admin-kit 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Các thay đổi đáng chú ý của `@wikex/admin-kit` được ghi tại đây theo Semantic Versioning.
 
+## 0.4.0 - 2026-09-13
+
+- Thay admin shell cũ bằng dashboard layout dựa trên Minimal TypeScript 7.6.1.
+- Thêm nav vertical/mini/mobile, workspace header và account drawer theo cùng một design system.
+- Giữ nguyên Payload forms, Live Preview, visual editor, block modal và project adapters.
+
 ## 0.3.0 - 2026-09-13
 
 - Thêm project scanner để phát hiện route Next.js và component React ở build-time.

package/README.md

@@ -4,8 +4,8 @@ Admin shell dùng chung cho các website Payload CMS của Wikex.
 
 Package sở hữu:
 
-- navigation, header, đăng nhập, đổi theme và branding động;
-- Minimal UI skin và các bản vá layout Payload;
+- dashboard shell dựa trên Minimal TypeScript 7.6.1 với nav vertical/mini/mobile;
+- workspace header, account drawer, đăng nhập, đổi theme và branding động;
 - Live Preview editor, drawer thuộc tính, block picker và resize text;
 - font family, line-height và runtime áp dụng typography;
 - chuẩn hóa tiếng Việt và hướng dẫn kích thước upload ảnh.

package/dist/admin/before-login.js

@@ -8,8 +8,8 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 var BeforeLogin = () => {
   const { siteName } = useAdminBrand();
-  return /* @__PURE__ */ jsxs("div", { className: "admin-login-intro", children: [
-    /* @__PURE__ */ jsxs("span", { className: "admin-login-intro__eyebrow", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "wikex-auth-intro", children: [
+    /* @__PURE__ */ jsxs("span", { className: "wikex-auth-intro__eyebrow", children: [
       siteName,
       " \xB7 Trung t\xE2m n\u1ED9i dung"
     ] }),

package/dist/admin/brand.js

@@ -3,7 +3,7 @@
 import {
   AdminIcon,
   AdminLogo
-} from "../chunk-SM6CCKQQ.js";
+} from "../chunk-AY7N3B45.js";
 import {
   configureAdminBrand,
   useAdminBrand

package/dist/admin/header.js

@@ -1,94 +1,178 @@
 'use client';
 "use client";
+import {
+  LogoutButton_default
+} from "../chunk-GZ2B5BTH.js";
 import {
   AdminIcon
-} from "../chunk-SM6CCKQQ.js";
-import "../chunk-X7VETFVD.js";
+} from "../chunk-AY7N3B45.js";
+import {
+  useAdminBrand
+} from "../chunk-X7VETFVD.js";
 import {
   ThemeToggle_default
 } from "../chunk-SAI5SWZA.js";
 
 // src/admin/Header.tsx
-import { Link, useAuth, useConfig, useNav } from "@payloadcms/ui";
-import { Menu, Settings2 } from "lucide-react";
+import { Link as Link2, useConfig as useConfig2, useNav } from "@payloadcms/ui";
+import { GalleryVerticalEnd, Menu } from "lucide-react";
+
+// src/admin/AccountDrawer.tsx
+import { Link, useAuth, useConfig } from "@payloadcms/ui";
+import { Settings2, X } from "lucide-react";
+import { usePathname } from "next/navigation";
 import { formatAdminURL } from "payload/shared";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getInitials = (name, email) => {
+  const source = name?.trim() || email?.split("@")[0] || "AD";
+  return source.split(/\s+/).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
+};
+var AccountDrawer = () => {
+  const pathname = usePathname();
+  const { user } = useAuth();
+  const {
+    config: {
+      admin: { routes: adminRoutes },
+      routes: { admin: adminRoute }
+    }
+  } = useConfig();
+  const [open, setOpen] = useState(false);
+  const userLabel = user?.name?.trim() || user?.email?.split("@")[0] || "Qu\u1EA3n tr\u1ECB vi\xEAn";
+  const initials = useMemo(() => getInitials(user?.name, user?.email), [user?.email, user?.name]);
+  useEffect(() => setOpen(false), [pathname]);
+  useEffect(() => {
+    if (!open) return;
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", closeOnEscape);
+    return () => window.removeEventListener("keydown", closeOnEscape);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { className: `wikex-account-drawer ${open ? "wikex-account-drawer--open" : ""}`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-expanded": open,
+        "aria-label": `M\u1EDF t\xE0i kho\u1EA3n ${userLabel}`,
+        className: "wikex-account-button",
+        onClick: () => setOpen(true),
+        title: userLabel,
+        type: "button",
+        children: /* @__PURE__ */ jsx("span", { children: initials })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "\u0110\xF3ng t\xE0i kho\u1EA3n",
+        className: "wikex-account-drawer__backdrop",
+        onClick: () => setOpen(false),
+        tabIndex: open ? 0 : -1,
+        type: "button"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        "aria-hidden": !open,
+        "aria-label": "T\xE0i kho\u1EA3n qu\u1EA3n tr\u1ECB",
+        "aria-modal": "true",
+        className: "wikex-account-drawer__panel",
+        role: "dialog",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "\u0110\xF3ng",
+              className: "wikex-account-drawer__close",
+              onClick: () => setOpen(false),
+              tabIndex: open ? 0 : -1,
+              type: "button",
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "wikex-account-drawer__profile", children: [
+            /* @__PURE__ */ jsx("span", { className: "wikex-account-drawer__avatar", children: initials }),
+            /* @__PURE__ */ jsx("strong", { children: userLabel }),
+            /* @__PURE__ */ jsx("small", { children: user?.email || "T\xE0i kho\u1EA3n qu\u1EA3n tr\u1ECB" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "wikex-account-drawer__menu", children: /* @__PURE__ */ jsxs(
+            Link,
+            {
+              className: "wikex-account-drawer__link",
+              href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
+              prefetch: false,
+              tabIndex: open ? 0 : -1,
+              children: [
+                /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }),
+                "C\xE0i \u0111\u1EB7t t\xE0i kho\u1EA3n"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "wikex-account-drawer__footer", children: /* @__PURE__ */ jsx(LogoutButton_default, { tabIndex: open ? 0 : -1 }) })
+        ]
+      }
+    )
+  ] });
+};
+var AccountDrawer_default = AccountDrawer;
 
 // src/admin/ViewSite.tsx
 import { ArrowUpRight } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var AdminViewSite = () => /* @__PURE__ */ jsxs("a", { className: "admin-view-site", "data-slot": "button", href: "/", rel: "noreferrer", target: "_blank", children: [
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var AdminViewSite = () => /* @__PURE__ */ jsxs2("a", { className: "admin-view-site", "data-slot": "button", href: "/", rel: "noreferrer", target: "_blank", children: [
   "Xem website",
-  /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" })
+  /* @__PURE__ */ jsx2(ArrowUpRight, { "aria-hidden": "true" })
 ] });
 var ViewSite_default = AdminViewSite;
 
 // src/admin/Header.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var getInitials = (name, email) => {
-  const source = name?.trim() || email?.split("@")[0] || "AD";
-  return source.split(/\s+/).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
-};
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var AdminHeader = () => {
-  const { user } = useAuth();
+  const brand = useAdminBrand();
   const { setNavOpen } = useNav();
   const {
     config: {
-      admin: { routes: adminRoutes },
       routes: { admin: adminRoute }
     }
-  } = useConfig();
-  const userLabel = user?.name?.trim() || user?.email?.split("@")[0] || "Qu\u1EA3n tr\u1ECB vi\xEAn";
-  const initials = getInitials(user?.name, user?.email);
-  return /* @__PURE__ */ jsxs2("header", { className: "minimal-admin-header", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "minimal-admin-header__left", children: [
-      /* @__PURE__ */ jsx2(
+  } = useConfig2();
+  return /* @__PURE__ */ jsx3("header", { className: "wikex-dashboard-header", children: /* @__PURE__ */ jsxs3("div", { className: "wikex-dashboard-header__container", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "wikex-dashboard-header__left", children: [
+      /* @__PURE__ */ jsx3(
         "button",
         {
           "aria-label": "M\u1EDF menu qu\u1EA3n tr\u1ECB",
-          className: "minimal-admin-header__menu",
+          className: "wikex-dashboard-header__menu",
           onClick: () => setNavOpen(true),
           type: "button",
-          children: /* @__PURE__ */ jsx2(Menu, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx3(Menu, { "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsx2(
-        Link,
+      /* @__PURE__ */ jsx3(
+        Link2,
         {
           "aria-label": "V\u1EC1 dashboard",
-          className: "minimal-admin-header__mobile-brand",
+          className: "wikex-dashboard-header__mobile-logo",
           href: adminRoute,
           prefetch: false,
-          children: /* @__PURE__ */ jsx2(AdminIcon, {})
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "minimal-admin-header__actions", children: [
-      /* @__PURE__ */ jsx2(ViewSite_default, {}),
-      /* @__PURE__ */ jsx2(ThemeToggle_default, {}),
-      /* @__PURE__ */ jsx2(
-        Link,
-        {
-          "aria-label": `M\u1EDF t\xE0i kho\u1EA3n ${userLabel}`,
-          className: "minimal-admin-header__settings",
-          href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
-          prefetch: false,
-          title: "C\xE0i \u0111\u1EB7t t\xE0i kho\u1EA3n",
-          children: /* @__PURE__ */ jsx2(Settings2, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx3(AdminIcon, {})
         }
       ),
-      /* @__PURE__ */ jsx2(
-        Link,
-        {
-          "aria-label": `M\u1EDF t\xE0i kho\u1EA3n ${userLabel}`,
-          className: "minimal-admin-header__account",
-          href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
-          prefetch: false,
-          title: userLabel,
-          children: /* @__PURE__ */ jsx2("span", { children: initials })
-        }
-      )
+      /* @__PURE__ */ jsxs3("div", { className: "wikex-dashboard-header__workspace", children: [
+        /* @__PURE__ */ jsx3("span", { className: "wikex-dashboard-header__workspace-icon", children: /* @__PURE__ */ jsx3(GalleryVerticalEnd, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxs3("span", { className: "wikex-dashboard-header__workspace-copy", children: [
+          /* @__PURE__ */ jsx3("small", { children: "Kh\xF4ng gian l\xE0m vi\u1EC7c" }),
+          /* @__PURE__ */ jsx3("strong", { children: brand.siteName })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "wikex-dashboard-header__actions", children: [
+      /* @__PURE__ */ jsx3(ViewSite_default, {}),
+      /* @__PURE__ */ jsx3(ThemeToggle_default, {}),
+      /* @__PURE__ */ jsx3(AccountDrawer_default, {})
     ] })
-  ] });
+  ] }) });
 };
 var Header_default = AdminHeader;
 export {

package/dist/admin/nav-client.js

@@ -3,16 +3,13 @@
 import {
   AdminIcon,
   AdminLogo
-} from "../chunk-SM6CCKQQ.js";
+} from "../chunk-AY7N3B45.js";
 import {
   useAdminBrand
 } from "../chunk-X7VETFVD.js";
-import {
-  LogoutButton_default
-} from "../chunk-GZ2B5BTH.js";
 
 // src/admin/NavClient.tsx
-import { Link, useAuth, useConfig, useNav } from "@payloadcms/ui";
+import { Link, useConfig, useNav } from "@payloadcms/ui";
 import {
   BookOpenText,
   BriefcaseBusiness,
@@ -20,12 +17,10 @@ import {
   ChevronRight,
   FileText,
   FolderKanban,
-  GalleryVerticalEnd,
   Home,
   Image,
   LayoutDashboard,
   Library,
-  Menu,
   PanelBottom,
   PanelTop,
   Settings2,
@@ -35,7 +30,7 @@ import {
 } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { formatAdminURL } from "payload/shared";
-import { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var iconBySlug = {
   categories: Tags,
@@ -51,14 +46,9 @@ var iconBySlug = {
   users: Users
 };
 var translateGroupLabel = (label) => label === "Collections" ? "B\u1ED9 s\u01B0u t\u1EADp" : label === "Globals" ? "Thi\u1EBFt l\u1EADp chung" : label;
-var getInitials = (name, email) => {
-  const source = name?.trim() || email?.split("@")[0] || "AD";
-  return source.split(/\s+/).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
-};
 var AdminNavClient = ({ groups }) => {
   const pathname = usePathname();
   const brand = useAdminBrand();
-  const { user } = useAuth();
   const { hydrated, navOpen, navRef, setNavOpen, shouldAnimate } = useNav();
   const {
     config: {
@@ -70,8 +60,7 @@ var AdminNavClient = ({ groups }) => {
   const [isMini, setIsMini] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   useEffect(() => {
-    const storedValue = window.localStorage.getItem("minimal-admin-nav-mini");
-    setIsMini(storedValue === "true");
+    setIsMini(window.localStorage.getItem("wikex-dashboard-nav-mini") === "true");
   }, []);
   useEffect(() => {
     const mediaQuery = window.matchMedia("(max-width: 768px)");
@@ -81,168 +70,119 @@ var AdminNavClient = ({ groups }) => {
     return () => mediaQuery.removeEventListener("change", syncViewport);
   }, []);
   useEffect(() => {
-    document.documentElement.style.setProperty("--nav-width", isMini ? "88px" : "280px");
-    window.localStorage.setItem("minimal-admin-nav-mini", String(isMini));
+    document.documentElement.style.setProperty(
+      "--nav-width",
+      isMini ? "var(--layout-nav-mini-width)" : "var(--layout-nav-vertical-width)"
+    );
+    window.localStorage.setItem("wikex-dashboard-nav-mini", String(isMini));
     return () => {
       document.documentElement.style.removeProperty("--nav-width");
     };
   }, [isMini]);
-  const userLabel = user?.name?.trim() || user?.email?.split("@")[0] || "Qu\u1EA3n tr\u1ECB vi\xEAn";
-  const initials = useMemo(() => getInitials(user?.name, user?.email), [user?.email, user?.name]);
   const closeMobileNav = () => {
     if (window.matchMedia("(max-width: 768px)").matches) setNavOpen(false);
   };
-  const classes = [
-    "minimal-nav",
-    navOpen && "minimal-nav--open",
-    isMini && "minimal-nav--mini",
-    shouldAnimate && "minimal-nav--animate",
-    hydrated && "minimal-nav--hydrated"
-  ].filter(Boolean).join(" ");
   const isActive = (href) => pathname === href || href !== adminRoute && pathname.startsWith(`${href}/`);
+  const rootClasses = [
+    "wikex-dashboard-nav",
+    navOpen && "wikex-dashboard-nav--open",
+    isMini && "wikex-dashboard-nav--mini",
+    shouldAnimate && "wikex-dashboard-nav--animate",
+    hydrated && "wikex-dashboard-nav--hydrated"
+  ].filter(Boolean).join(" ");
+  const navItem = ({
+    active,
+    href,
+    icon: Icon,
+    label
+  }) => /* @__PURE__ */ jsxs(
+    Link,
+    {
+      "aria-current": active ? "page" : void 0,
+      className: `wikex-nav-section__item ${active ? "wikex-nav-section__item--active" : ""}`,
+      href,
+      onClick: closeMobileNav,
+      prefetch: false,
+      title: label,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "wikex-nav-section__icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx("span", { className: "wikex-nav-section__title", children: label })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "aside",
     {
       "aria-label": "\u0110i\u1EC1u h\u01B0\u1EDBng qu\u1EA3n tr\u1ECB",
-      className: classes,
+      className: rootClasses,
       inert: isMobile && !navOpen || void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "minimal-nav__scroll", ref: navRef, children: [
-          /* @__PURE__ */ jsxs("div", { className: "minimal-nav__brand-row", children: [
-            /* @__PURE__ */ jsxs(
-              Link,
-              {
-                "aria-label": `V\u1EC1 dashboard ${brand.siteName}`,
-                className: "minimal-nav__brand",
-                href: adminRoute,
-                onClick: closeMobileNav,
-                prefetch: false,
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "minimal-nav__brand-full", children: /* @__PURE__ */ jsx(AdminLogo, {}) }),
-                  /* @__PURE__ */ jsx("span", { className: "minimal-nav__brand-icon", children: /* @__PURE__ */ jsx(AdminIcon, {}) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                "aria-label": "\u0110\xF3ng menu",
-                className: "minimal-nav__mobile-close",
-                onClick: () => setNavOpen(false),
-                type: "button",
-                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-              }
-            )
-          ] }),
+        /* @__PURE__ */ jsxs("div", { className: "wikex-dashboard-nav__top", children: [
           /* @__PURE__ */ jsxs(
             Link,
             {
-              className: "minimal-nav__workspace",
+              "aria-label": `V\u1EC1 dashboard ${brand.siteName}`,
+              className: "wikex-dashboard-nav__logo",
               href: adminRoute,
               onClick: closeMobileNav,
               prefetch: false,
-              title: brand.siteName,
               children: [
-                /* @__PURE__ */ jsx("span", { className: "minimal-nav__workspace-icon", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { "aria-hidden": "true" }) }),
-                /* @__PURE__ */ jsxs("span", { className: "minimal-nav__workspace-copy", children: [
-                  /* @__PURE__ */ jsx("small", { children: "Kh\xF4ng gian l\xE0m vi\u1EC7c" }),
-                  /* @__PURE__ */ jsx("strong", { children: brand.siteName })
-                ] }),
-                /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true", className: "minimal-nav__workspace-menu" })
+                /* @__PURE__ */ jsx("span", { className: "wikex-dashboard-nav__logo-full", children: /* @__PURE__ */ jsx(AdminLogo, {}) }),
+                /* @__PURE__ */ jsx("span", { className: "wikex-dashboard-nav__logo-icon", children: /* @__PURE__ */ jsx(AdminIcon, {}) })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("nav", { className: "minimal-nav__menu", children: [
-            /* @__PURE__ */ jsxs("div", { className: "minimal-nav__group", children: [
-              /* @__PURE__ */ jsx("span", { className: "minimal-nav__group-label", children: "T\u1ED5ng quan" }),
-              /* @__PURE__ */ jsxs(
-                Link,
-                {
-                  "aria-current": pathname === adminRoute ? "page" : void 0,
-                  className: `minimal-nav__item ${pathname === adminRoute ? "minimal-nav__item--active" : ""}`,
-                  href: adminRoute,
-                  onClick: closeMobileNav,
-                  prefetch: false,
-                  title: "Dashboard",
-                  children: [
-                    /* @__PURE__ */ jsx(LayoutDashboard, { "aria-hidden": "true" }),
-                    /* @__PURE__ */ jsx("span", { children: "T\u1ED5ng quan" })
-                  ]
-                }
-              )
-            ] }),
-            groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "minimal-nav__group", children: [
-              /* @__PURE__ */ jsx("span", { className: "minimal-nav__group-label", children: translateGroupLabel(group.label) }),
-              group.items.map((item) => {
-                const href = formatAdminURL({
-                  adminRoute,
-                  path: `/${item.type}/${item.slug}`
-                });
-                const Icon = iconBySlug[item.slug] || FileText;
-                const active = isActive(href);
-                return /* @__PURE__ */ jsxs(
-                  Link,
-                  {
-                    "aria-current": active ? "page" : void 0,
-                    className: `minimal-nav__item ${active ? "minimal-nav__item--active" : ""}`,
-                    href,
-                    onClick: closeMobileNav,
-                    prefetch: false,
-                    title: item.label,
-                    children: [
-                      /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
-                      /* @__PURE__ */ jsx("span", { children: item.label })
-                    ]
-                  },
-                  `${item.type}-${item.slug}`
-                );
-              })
-            ] }, group.label)),
-            folders && folders.browseByFolder && /* @__PURE__ */ jsxs("div", { className: "minimal-nav__group", children: [
-              /* @__PURE__ */ jsx("span", { className: "minimal-nav__group-label", children: "Th\u01B0 vi\u1EC7n" }),
-              /* @__PURE__ */ jsxs(
-                Link,
-                {
-                  "aria-current": isActive(formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder })) ? "page" : void 0,
-                  className: `minimal-nav__item ${isActive(formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder })) ? "minimal-nav__item--active" : ""}`,
-                  href: formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder }),
-                  onClick: closeMobileNav,
-                  prefetch: false,
-                  title: "Duy\u1EC7t theo th\u01B0 m\u1EE5c",
-                  children: [
-                    /* @__PURE__ */ jsx(Library, { "aria-hidden": "true" }),
-                    /* @__PURE__ */ jsx("span", { children: "Duy\u1EC7t theo th\u01B0 m\u1EE5c" })
-                  ]
-                }
-              )
-            ] })
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "\u0110\xF3ng menu",
+              className: "wikex-dashboard-nav__mobile-close",
+              onClick: () => setNavOpen(false),
+              type: "button",
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "wikex-dashboard-nav__scrollbar", ref: navRef, children: /* @__PURE__ */ jsxs("nav", { className: `wikex-nav-section ${isMini ? "wikex-nav-section--mini" : ""}`, children: [
+          /* @__PURE__ */ jsxs("section", { className: "wikex-nav-section__group", children: [
+            /* @__PURE__ */ jsx("h2", { className: "wikex-nav-section__subheader", children: "T\u1ED5ng quan" }),
+            navItem({
+              active: pathname === adminRoute,
+              href: adminRoute,
+              icon: LayoutDashboard,
+              label: "T\u1ED5ng quan"
+            })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "minimal-nav__footer", children: [
-            /* @__PURE__ */ jsxs(
-              Link,
-              {
-                className: "minimal-nav__account",
-                href: formatAdminURL({ adminRoute, path: adminRoutes.account }),
-                onClick: closeMobileNav,
-                prefetch: false,
-                title: userLabel,
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "minimal-nav__avatar", children: initials }),
-                  /* @__PURE__ */ jsxs("span", { className: "minimal-nav__account-copy", children: [
-                    /* @__PURE__ */ jsx("strong", { children: userLabel }),
-                    /* @__PURE__ */ jsx("small", { children: user?.email || "T\xE0i kho\u1EA3n qu\u1EA3n tr\u1ECB" })
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "minimal-nav__logout", children: /* @__PURE__ */ jsx(LogoutButton_default, {}) })
+          groups.map((group) => /* @__PURE__ */ jsxs("section", { className: "wikex-nav-section__group", children: [
+            /* @__PURE__ */ jsx("h2", { className: "wikex-nav-section__subheader", children: translateGroupLabel(group.label) }),
+            group.items.map((item) => {
+              const href = formatAdminURL({
+                adminRoute,
+                path: `/${item.type}/${item.slug}`
+              });
+              return /* @__PURE__ */ jsx(React.Fragment, { children: navItem({
+                active: isActive(href),
+                href,
+                icon: iconBySlug[item.slug] || FileText,
+                label: item.label
+              }) }, `${item.type}-${item.slug}`);
+            })
+          ] }, group.label)),
+          folders && folders.browseByFolder && /* @__PURE__ */ jsxs("section", { className: "wikex-nav-section__group", children: [
+            /* @__PURE__ */ jsx("h2", { className: "wikex-nav-section__subheader", children: "Th\u01B0 vi\u1EC7n" }),
+            navItem({
+              active: isActive(formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder })),
+              href: formatAdminURL({ adminRoute, path: adminRoutes.browseByFolder }),
+              icon: Library,
+              label: "Duy\u1EC7t theo th\u01B0 m\u1EE5c"
+            })
           ] })
-        ] }),
+        ] }) }),
         /* @__PURE__ */ jsx(
           "button",
           {
             "aria-label": isMini ? "M\u1EDF r\u1ED9ng menu" : "Thu g\u1ECDn menu",
-            className: "minimal-nav__collapse",
+            className: "wikex-dashboard-nav__toggle",
             onClick: () => setIsMini((current) => !current),
             title: isMini ? "M\u1EDF r\u1ED9ng menu" : "Thu g\u1ECDn menu",
             type: "button",

package/dist/{chunk-SM6CCKQQ.js → chunk-AY7N3B45.js}

@@ -14,7 +14,7 @@ var BrandLogo = ({
 }) => /* @__PURE__ */ jsx(
   "span",
   {
-    className: ["brand-logo", className].filter(Boolean).join(" "),
+    className: ["wikex-logo__asset", className].filter(Boolean).join(" "),
     style: { alignItems: "center", display: "inline-flex", height, maxWidth },
     children: /* @__PURE__ */ jsx(
       Image,
@@ -31,11 +31,11 @@ var BrandLogo = ({
 );
 var AdminIcon = () => {
   const brand = useAdminBrand();
-  return /* @__PURE__ */ jsx("span", { className: "aurea-brand aurea-brand--icon", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("span", { className: "wikex-logo wikex-logo--icon", children: /* @__PURE__ */ jsx(
     BrandLogo,
     {
       asset: brand.logo,
-      className: "aurea-brand__image",
+      className: "wikex-logo__image",
       height: 32,
       maxWidth: 32,
       siteName: brand.siteName
@@ -44,11 +44,11 @@ var AdminIcon = () => {
 };
 var AdminLogo = () => {
   const brand = useAdminBrand();
-  return /* @__PURE__ */ jsx("span", { "aria-label": brand.siteName, className: "aurea-brand aurea-brand--logo", role: "img", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("span", { "aria-label": brand.siteName, className: "wikex-logo wikex-logo--full", role: "img", children: /* @__PURE__ */ jsx(
     BrandLogo,
     {
       asset: brand.logo,
-      className: "aurea-brand__image",
+      className: "wikex-logo__image",
       height: 42,
       maxWidth: 190,
       siteName: brand.siteName

package/dist/starter-client.js

@@ -1,6 +1,6 @@
 'use client';
 "use client";
-import "./chunk-SM6CCKQQ.js";
+import "./chunk-AY7N3B45.js";
 import {
   configureAdminBrand
 } from "./chunk-X7VETFVD.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikex/admin-kit",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Reusable Payload CMS admin shell, visual editor and typography tools for Wikex projects",
   "license": "UNLICENSED",
   "private": false,