@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
383 lines (382 loc) • 25.4 kB
JavaScript
"use client";
;
var __webpack_modules__ = {
"./ColorSchemeSwitch": function(module) {
module.exports = import("./ColorSchemeSwitch.js").then(function(module) {
return module;
});
}
};
var __webpack_module_cache__ = {};
function __webpack_require__(moduleId) {
var cachedModule = __webpack_module_cache__[moduleId];
if (void 0 !== cachedModule) return cachedModule.exports;
var module = __webpack_module_cache__[moduleId] = {
exports: {}
};
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
return module.exports;
}
(()=>{
__webpack_require__.n = (module)=>{
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
__webpack_require__.d(getter, {
a: getter
});
return getter;
};
})();
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
(()=>{
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
default: ()=>Menu
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const react_namespaceObject = require("@headlessui/react");
const outline_namespaceObject = require("@heroicons/react/24/outline");
const external_clsx_namespaceObject = require("clsx");
const Link_js_namespaceObject = require("./common/Link.js");
var Link_js_default = /*#__PURE__*/ __webpack_require__.n(Link_js_namespaceObject);
const external_react_namespaceObject = require("react");
const external_next_themes_namespaceObject = require("next-themes");
const ConfigContext_js_namespaceObject = require("../context/ConfigContext.js");
const I18nContext_js_namespaceObject = require("../context/I18nContext.js");
const useRouterInternal_js_namespaceObject = require("../hooks/useRouterInternal.js");
const tools_js_namespaceObject = require("../utils/tools.js");
const external_Divider_js_namespaceObject = require("./Divider.js");
var external_Divider_js_default = /*#__PURE__*/ __webpack_require__.n(external_Divider_js_namespaceObject);
const ResourceIcon_js_namespaceObject = require("./common/ResourceIcon.js");
var ResourceIcon_js_default = /*#__PURE__*/ __webpack_require__.n(ResourceIcon_js_namespaceObject);
const Button_js_namespaceObject = require("./radix/Button.js");
var Button_js_default = /*#__PURE__*/ __webpack_require__.n(Button_js_namespaceObject);
const ColorSchemeSwitch = /*#__PURE__*/ (0, external_react_namespaceObject.lazy)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./ColorSchemeSwitch")));
function Menu({ resources, resource: currentResource, resourcesTitles, customPages, configuration, resourcesIcons, user, externalLinks, title }) {
const [sidebarOpen, setSidebarOpen] = (0, external_react_namespaceObject.useState)(false);
const { basePath } = (0, ConfigContext_js_namespaceObject.useConfig)();
const { pathname } = (0, useRouterInternal_js_namespaceObject.useRouterInternal)();
const { t } = (0, I18nContext_js_namespaceObject.useI18n)();
const { forcedTheme } = (0, external_next_themes_namespaceObject.useTheme)();
const customPagesNavigation = customPages?.map((page)=>({
name: page.title,
href: `${basePath}${page.path}`,
current: pathname.endsWith(`${basePath}${page.path}`),
icon: page.icon
}));
const ungroupedModels = resources?.filter((resource)=>!configuration?.groups?.some((group)=>group.models.includes(resource)));
const renderNavigationItem = (item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("a", {
href: item.href,
className: (0, external_clsx_namespaceObject.clsx)(item.current ? "bg-nextadmin-menu-muted dark:bg-dark-nextadmin-menu-muted dark:text-dark-nextadmin-menu-emphasis text-nextadmin-menu-emphasis" : "text-nextadmin-menu-color dark:text-dark-nextadmin-menu-color dark:hover:bg-dark-nextadmin-menu-muted hover:bg-nextadmin-menu-muted hover:text-nextadmin-menu-emphasis dark:hover:text-dark-nextadmin-menu-emphasis", "group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm leading-6 transition-colors"),
children: [
!!item.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ResourceIcon_js_default(), {
icon: item.icon,
className: (0, external_clsx_namespaceObject.clsx)(item.current ? "text-nextadmin-menu-emphasis dark:text-dark-nextadmin-menu-emphasis" : "text-nextadmin-menu-color dark:text-dark-nextadmin-menu-color group-hover:text-nextadmin-menu-emphasis dark:group-hover:text-dark-nextadmin-menu-emphasis", "h-5 w-5 shrink-0"),
"aria-hidden": "true"
}),
item.name
]
});
const getItemProps = (model)=>({
name: t(`model.${model}.plural`, {}, resourcesTitles?.[model] ?? model),
href: `${basePath}/${(0, tools_js_namespaceObject.slugify)(model)}`,
current: model === currentResource,
icon: resourcesIcons?.[model]
});
const getInitials = ()=>{
const username = user?.data.name;
if (username) {
const [firstName, lastName] = username.split(" ");
if (firstName && lastName) return `${firstName.charAt(0)}${lastName.charAt(0)}`;
return username.charAt(0);
}
};
const renderUser = ()=>{
if (!user) return null;
const logoutBind = async ()=>{
if (user.logout) if ("function" == typeof user.logout) {
await user.logout();
location.reload();
} else if ("string" == typeof user.logout) location.href = user.logout;
else await fetch(...user.logout).then(()=>{
location.reload();
});
};
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "text-nextadmin-menu-color dark:text-dark-nextadmin-menu-color flex flex-1 items-center gap-1 px-2 py-3 text-sm font-semibold leading-6",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "flex min-w-0 flex-1 items-center gap-3",
children: [
user.data.picture ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
width: 32,
height: 32,
className: "flex h-8 w-8 flex-shrink-0 rounded-full",
src: user.data.picture,
alt: "User picture"
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "bg-nextadmin-menu-color/20 dark:bg-dark-nextadmin-menu-color/95 text-nextadminmenu-emphasis dark:text-dark-nextadmin-menu-muted flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full uppercase",
children: getInitials()
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
className: "sr-only",
children: "Logged in as"
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
"aria-hidden": "true",
className: "flex-shrink overflow-hidden text-ellipsis whitespace-nowrap",
children: user.data.name
})
]
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Button_js_default(), {
variant: "ghost",
size: "sm",
className: "order-2 flex-shrink-0 basis-auto !px-2 py-2",
type: "button",
onClick: logoutBind,
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(outline_namespaceObject.ArrowRightEndOnRectangleIcon, {
className: "h-6 w-6"
})
})
]
});
};
const renderExternalLinks = ()=>{
if (!externalLinks) return null;
return externalLinks.map((link)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Link_js_default(), {
href: link.url,
className: "text-nextadmin-menu-color dark:text-dark-nextadmin-menu-color hover:text-nextadmin-menu-emphasis dark:hover:text-dark-nextadmin-menu-emphasis hover:bg-nextadmin-menu-muted dark:hover:bg-dark-nextadmin-menu-muted flex flex-row items-center justify-between gap-2 rounded-lg p-3 text-sm font-medium transition-colors",
target: "_blank",
rel: "noopener",
children: [
link.label,
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(outline_namespaceObject.ArrowTopRightOnSquareIcon, {
className: "h-5 w-5"
})
]
}, link.url));
};
const renderNavigation = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "bg-nextadmin-menu-background dark:bg-dark-nextadmin-menu-background border-r-nextadmin-border-default dark:border-r-dark-nextadmin-border-default flex grow flex-col overflow-y-auto border-r pb-2",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "flex items-center px-2 py-3",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Link_js_default(), {
href: basePath,
className: "flex h-[40px] items-center gap-2 overflow-hidden",
children: "string" == typeof title ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "text-md dark:text-dark-nextadmin-brand-inverted overflow-hidden text-ellipsis whitespace-nowrap font-semibold",
children: title
}) : title
})
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Divider_js_default(), {}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("nav", {
className: "mt-4 flex flex-1 flex-col gap-y-6 px-4",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("ul", {
role: "list",
className: "flex flex-1 flex-col gap-y-4",
children: [
configuration?.groups?.map((group)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("li", {
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: (0, external_clsx_namespaceObject.clsx)("text-nextadmin-menu-color dark:text-dark-nextadmin-menu-color mb-2 text-xs uppercase tracking-wider", group.className),
children: group.title
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", {
role: "list",
className: "-ml-2 mt-1 flex flex-col gap-y-1",
children: group.models.map((model)=>{
const item = getItemProps(model);
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
children: renderNavigationItem(item)
}, model);
})
})
]
}, group.title)),
!!ungroupedModels?.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
children: [
!!configuration?.groups.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Divider_js_default(), {}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", {
className: "-ml-2 flex flex-col gap-y-1",
children: ungroupedModels?.map((model)=>{
const item = getItemProps(model);
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
children: renderNavigationItem(item)
}, model);
})
})
})
]
}),
!!customPagesNavigation?.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Divider_js_default(), {}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", {
role: "list",
className: "-ml-2 flex flex-col gap-y-1",
children: customPagesNavigation?.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
children: renderNavigationItem(item)
}, item.name))
})
})
]
})
]
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "flex flex-col",
children: [
renderExternalLinks(),
!forcedTheme && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Suspense, {
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ColorSchemeSwitch, {})
}),
renderUser()
]
})
]
})
]
})
});
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Transition, {
show: sidebarOpen,
as: external_react_namespaceObject.Fragment,
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_namespaceObject.Dialog, {
as: "div",
className: "relative z-50 lg:hidden",
onClose: setSidebarOpen,
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.TransitionChild, {
as: external_react_namespaceObject.Fragment,
enter: "transition-opacity ease-linear duration-300",
enterFrom: "opacity-0",
enterTo: "opacity-100",
leave: "transition-opacity ease-linear duration-300",
leaveFrom: "opacity-100",
leaveTo: "opacity-0",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "fixed inset-0 bg-slate-900/80"
})
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "fixed inset-0 flex",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.TransitionChild, {
as: external_react_namespaceObject.Fragment,
enter: "transition ease-in-out duration-300 transform",
enterFrom: "-translate-x-full",
enterTo: "translate-x-0",
leave: "transition ease-in-out duration-300 transform",
leaveFrom: "translate-x-0",
leaveTo: "-translate-x-full",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_namespaceObject.DialogPanel, {
className: "relative mr-16 flex w-full max-w-xs flex-1",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.TransitionChild, {
as: external_react_namespaceObject.Fragment,
enter: "ease-in-out duration-300",
enterFrom: "opacity-0",
enterTo: "opacity-100",
leave: "ease-in-out duration-300",
leaveFrom: "opacity-100",
leaveTo: "opacity-0",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "absolute left-full top-0 flex w-16 justify-center pt-5",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
type: "button",
className: "-m-2.5 p-2.5",
onClick: ()=>setSidebarOpen(false),
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
className: "sr-only",
children: "Close sidebar"
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(outline_namespaceObject.XMarkIcon, {
className: "h-6 w-6 text-white",
"aria-hidden": "true"
})
]
})
})
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "flex grow flex-col gap-y-5 overflow-y-auto bg-white",
children: renderNavigation()
})
]
})
})
})
]
})
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col",
children: renderNavigation()
})
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "dark:bg-dark-nextadmin-background-default sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
type: "button",
className: "-m-2.5 p-2.5 text-slate-700 lg:hidden",
onClick: ()=>setSidebarOpen(true),
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
className: "sr-only",
children: "Open sidebar"
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(outline_namespaceObject.Bars3Icon, {
className: "dark:text-dark-nextadmin-content-default h-6 w-6",
"aria-hidden": "true"
})
]
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "text-md dark:text-dark-nextadmin-brand-inverted flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-6 text-slate-900",
children: title
})
]
})
]
});
}
})();
exports["default"] = __webpack_exports__["default"];
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"default"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});