@uxf/cms 10.0.0-beta.12 → 10.0.0-beta.14

package/lib/layout/breadcrumbs.js

@@ -11,9 +11,9 @@ const Breadcrumbs = (props) => {
     if (props.items.length === 0) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: "uxf-typo-body mb-4 flex flex-wrap items-center text-lightLow" }, props.items.map((item, index) => (react_1.default.createElement("span", { className: "mr-2 last:mr-0", key: index },
-        !!index && react_1.default.createElement(icon_1.Icon, { className: "mr-2 inline", name: "angleRight", size: 16 }),
-        item.href ? (react_1.default.createElement(link_1.default, { href: item.href, className: "transition-colors hover:text-lightHigh" },
+    return (react_1.default.createElement("div", { className: "uxf-cms-breadcrumbs" }, props.items.map((item, index) => (react_1.default.createElement("span", { className: "uxf-cms-breadcrumbs__item", key: index },
+        !!index && react_1.default.createElement(icon_1.Icon, { className: "uxf-cms-breadcrumbs__divide-icon", name: "angleRight", size: 16 }),
+        item.href ? (react_1.default.createElement(link_1.default, { href: item.href, className: "uxf-cms-breadcrumbs__link" },
             react_1.default.createElement("span", null, item.title))) : (react_1.default.createElement("span", null, item.title)))))));
 };
 exports.Breadcrumbs = Breadcrumbs;

package/lib/layout/layout-container.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutContainer = void 0;
 const react_1 = __importDefault(require("react"));
 const maxWidthClassName = {
-    narrow: "max-w-[788px]",
-    wide: "max-w-[1024px]",
+    narrow: "uxf-cms-layout__container--narrow",
+    wide: "uxf-cms-layout__container--wide",
     fullWidth: "",
     none: "",
 };
@@ -17,6 +17,6 @@ const LayoutContainer = (props) => {
     if (type === "none") {
         return react_1.default.createElement(react_1.default.Fragment, null, props.children);
     }
-    return (react_1.default.createElement("div", { className: `${maxWidthClassName[type]} mx-auto px-4 md:px-10 ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` }, props.children));
+    return (react_1.default.createElement("div", { className: `${maxWidthClassName[type]} uxf-cms-layout__container ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` }, props.children));
 };
 exports.LayoutContainer = LayoutContainer;

package/lib/layout/layout.js

@@ -13,31 +13,29 @@ const breadcrumbs_1 = require("./breadcrumbs");
 const loader_1 = require("@uxf/ui/loader/loader");
 const layout_container_1 = require("./layout-container");
 const Layout = (props) => {
-    var _a;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { Header, Logo, MessageBar, TitleRightContainer, ToolbarRight, breadcrumbs, children, containerType, headerContainerType, loading, mainClassName, menuConfiguration, subtitle, title, stickyHeader, CustomHeader, } = props;
+    var _a, _b;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(head_1.default, null,
             react_1.default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
             react_1.default.createElement("meta", { charSet: "utf-8" }),
-            react_1.default.createElement("title", null, `${title} | ${(_a = config_1.config.get("app-name")) !== null && _a !== void 0 ? _a : ""}`)),
-        react_1.default.createElement("div", { className: "flex" },
-            react_1.default.createElement("div", { className: "flex w-full bg-gray-100 dark:bg-gray-900 dark:text-darkHigh" },
-                react_1.default.createElement(sidebar_1.Sidebar, { menuConfiguration: menuConfiguration, Logo: Logo }),
-                react_1.default.createElement("main", { className: `min-h-screen w-full pb-16 md:ml-[var(--drawerWidth)] md:w-[calc(100%_-_var(--drawerWidth))] md:pb-0 ${mainClassName !== null && mainClassName !== void 0 ? mainClassName : ""}`, style: { "--drawerWidth": `${styles_1.drawerWidth}px` } }, loading ? (react_1.default.createElement("div", { className: "flex h-96 flex-col items-center justify-center" },
-                    react_1.default.createElement("div", { className: "text-center" },
+            react_1.default.createElement("title", null, `${props.title} | ${config_1.config.get("app-name") || ""}`)),
+        react_1.default.createElement("div", { className: "uxf-cms-layout" },
+            react_1.default.createElement("div", { className: "uxf-cms-layout__wrapper" },
+                react_1.default.createElement(sidebar_1.Sidebar, { menuConfiguration: props.menuConfiguration, Logo: props.Logo }),
+                react_1.default.createElement("main", { className: `uxf-cms-layout__main ${(_a = props.mainClassName) !== null && _a !== void 0 ? _a : ""}`, style: { "--drawer-width": `${styles_1.drawerWidth}px` } }, props.loading ? (react_1.default.createElement("div", { className: "uxf-cms-layout__loading" },
+                    react_1.default.createElement("div", { className: "uxf-cms-layout__loading-inner" },
                         react_1.default.createElement(loader_1.Loader, null),
-                        react_1.default.createElement("p", { className: "mt-2" }, "Na\u010D\u00EDt\u00E1m\u2026")))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    CustomHeader ? (CustomHeader) : (react_1.default.createElement("div", { className: `${Header ? "bg-white dark:bg-gray-950" : ""} ${stickyHeader ? "sticky top-0 z-10 bg-white shadow-md dark:bg-gray-950" : ""}` },
-                        ToolbarRight && (react_1.default.createElement("div", { className: "flex h-12 items-center justify-end bg-sidebar-background px-6 text-darkMedium" }, ToolbarRight)),
-                        MessageBar,
-                        react_1.default.createElement(layout_container_1.LayoutContainer, { type: headerContainerType !== null && headerContainerType !== void 0 ? headerContainerType : containerType, className: "pb-9 pt-12" },
-                            breadcrumbs && react_1.default.createElement(breadcrumbs_1.Breadcrumbs, { items: breadcrumbs }),
-                            react_1.default.createElement("div", { className: "flex items-center justify-between" },
-                                react_1.default.createElement("h1", { className: "uxf-typo-h4" }, title),
-                                TitleRightContainer),
-                            subtitle,
-                            Header))),
-                    react_1.default.createElement(layout_container_1.LayoutContainer, { type: containerType }, children))))))));
+                        react_1.default.createElement("p", { className: "uxf-cms-layout__loading-text" }, "Na\u010D\u00EDt\u00E1m\u2026")))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    props.CustomHeader ? (props.CustomHeader) : (react_1.default.createElement("div", { className: `${props.Header ? "uxf-cms-layout__header" : ""} ${props.stickyHeader ? "uxf-cms-layout__header--sticky" : ""}` },
+                        props.ToolbarRight && (react_1.default.createElement("div", { className: "uxf-cms-layout__toolbar" }, props.ToolbarRight)),
+                        props.MessageBar,
+                        react_1.default.createElement(layout_container_1.LayoutContainer, { type: (_b = props.headerContainerType) !== null && _b !== void 0 ? _b : props.containerType, className: "uxf-cms-layout__container--basic" },
+                            props.breadcrumbs && react_1.default.createElement(breadcrumbs_1.Breadcrumbs, { items: props.breadcrumbs }),
+                            react_1.default.createElement("div", { className: "uxf-cms-layout__title-wrapper" },
+                                react_1.default.createElement("h1", { className: "uxf-cms-layout__title" }, props.title),
+                                props.TitleRightContainer),
+                            props.subtitle,
+                            props.Header))),
+                    react_1.default.createElement(layout_container_1.LayoutContainer, { type: props.containerType }, props.children))))))));
 };
 exports.Layout = Layout;

package/lib/layout/sidebar.js

@@ -34,8 +34,7 @@ const uxfLogo = (react_1.default.createElement("svg", { width: "134", height: "3
     react_1.default.createElement("path", { fill: "#FFF", fillRule: "evenodd", d: "M33.563 12.874a9.103 9.103 0 0 0 0-12.874L20.69 12.874l.107.105a9.103 9.103 0 0 0 12.766-.105Zm-20.69-6.437a9.103 9.103 0 0 1 .106 12.766l-.105.107L0 6.437a9.103 9.103 0 0 1 12.874 0ZM40 33.563 27.127 20.69l-.106.107a9.103 9.103 0 0 0 12.98 12.766Zm-20.69-6.437-.107-.105A9.103 9.103 0 0 0 6.437 40l12.874-12.874Z", clipRule: "evenodd" }),
     react_1.default.createElement("path", { fill: "#FFF", fillRule: "evenodd", d: "m84.325 7.295 5.133 8.675h.199l5.158-8.675h6.078l-7.768 12.727 7.942 12.727h-6.19l-5.22-8.687h-.199l-5.22 8.687h-6.165l7.967-12.727-7.818-12.727h6.103Zm-24.194 0v16.07c0 .97.214 1.832.64 2.586a4.58 4.58 0 0 0 1.809 1.777c.779.431 1.686.647 2.722.647 1.044 0 1.953-.216 2.728-.647a4.591 4.591 0 0 0 1.802-1.777c.427-.754.64-1.616.64-2.585V7.296h5.382v16.53c0 1.856-.441 3.48-1.324 4.872-.882 1.392-2.115 2.475-3.697 3.25-1.583.775-3.426 1.162-5.531 1.162-2.113 0-3.96-.387-5.543-1.162-1.583-.775-2.813-1.858-3.692-3.25-.878-1.392-1.317-3.016-1.317-4.872V7.296h5.381ZM170.25 13.41c2.411 0 4.311.51 5.698 1.529 1.388 1.019 2.198 2.407 2.43 4.164l-4.847.298a2.555 2.555 0 0 0-.534-1.125 2.942 2.942 0 0 0-1.075-.808c-.444-.203-.972-.304-1.585-.304-.821 0-1.512.172-2.076.515-.563.344-.845.802-.845 1.374 0 .456.182.84.547 1.156.364.315.99.567 1.877.758l3.455.696c1.856.381 3.24.994 4.151 1.84.912.845 1.367 1.955 1.367 3.33 0 1.252-.366 2.35-1.1 3.294-.733.945-1.736 1.68-3.007 2.206-1.272.526-2.737.79-4.394.79-2.527 0-4.539-.529-6.034-1.585-1.496-1.057-2.372-2.496-2.629-4.32l5.208-.273c.157.77.538 1.357 1.143 1.759.605.402 1.38.603 2.324.603.928 0 1.676-.18 2.244-.54.567-.361.855-.827.864-1.4-.009-.48-.212-.875-.609-1.186-.398-.31-1.011-.55-1.84-.715l-3.306-.659c-1.864-.372-3.25-1.019-4.157-1.938-.908-.92-1.361-2.093-1.361-3.518 0-1.226.333-2.283 1-3.17.667-.886 1.608-1.57 2.821-2.05 1.214-.48 2.637-.72 4.27-.72Zm-36.686.373a12.285 12.285 0 0 0-3.051-.373c-1.525 0-2.865.23-4.021.69-1.156.46-2.098 1.114-2.827 1.964-.73.849-1.219 1.854-1.467 3.014l4.897.397c.182-.63.555-1.153 1.119-1.572.563-.418 1.321-.627 2.274-.627.903 0 1.601.215 2.094.646.493.43.74 1.04.74 1.827v.075c0 .405-.153.712-.46.92-.307.206-.8.362-1.479.465-.68.104-1.574.214-2.685.33-.944.09-1.845.248-2.703.472a7.698 7.698 0 0 0-2.293.994 4.727 4.727 0 0 0-1.591 1.74c-.39.721-.584 1.612-.584 2.673 0 1.259.275 2.31.826 3.15a5.147 5.147 0 0 0 2.256 1.902c.953.427 2.038.64 3.257.64.944 0 1.777-.126 2.498-.38a5.55 5.55 0 0 0 1.852-1.055 5.31 5.31 0 0 0 1.23-1.573h.149v2.648h5.022V19.873c0-1.135-.22-2.11-.659-2.927a5.655 5.655 0 0 0-1.796-2.007 8.039 8.039 0 0 0-2.598-1.156Zm-13.424-2.05V7.294h-16.853v25.454h5.381V22.235h10.354v-4.438h-10.354v-6.065h11.472Zm32.603 1.677c1.326 0 2.482.29 3.468.87.986.58 1.753 1.407 2.3 2.48.546 1.073.82 2.35.82 3.834V32.75h-5.295V21.539c.008-1.169-.29-2.082-.895-2.74-.605-.66-1.437-.989-2.498-.989-.713 0-1.34.153-1.883.46a3.166 3.166 0 0 0-1.268 1.336c-.302.584-.458 1.286-.466 2.107V32.75h-5.295V13.659h5.047v3.368H147a5.358 5.358 0 0 1 2.126-2.641c.994-.65 2.2-.976 3.616-.976Zm-20.061 10.782c.286-.087.512-.184.678-.292v2.026c0 .671-.17 1.272-.51 1.802-.34.53-.808.951-1.404 1.262-.597.31-1.285.466-2.064.466-.812 0-1.481-.189-2.007-.566-.526-.377-.789-.925-.789-1.646 0-.497.128-.914.385-1.25.257-.335.617-.602 1.082-.801a6.547 6.547 0 0 1 1.628-.435l.969-.143a24.15 24.15 0 0 0 1.069-.186c.356-.071.677-.15.963-.237Z", clipRule: "evenodd" })));
 const Sidebar = (props) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { menuConfiguration, Logo, CustomSidebar } = props;
+    var _a, _b;
     const [deviceHeight, setDeviceHeight] = (0, react_1.useState)(0);
     const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
     const toggleMenu = () => setIsMenuOpen((prev) => !prev);
@@ -50,13 +49,13 @@ const Sidebar = (props) => {
             window.removeEventListener("resize", handleDeviceHeight);
         };
     });
-    return (CustomSidebar !== null && CustomSidebar !== void 0 ? CustomSidebar : (react_1.default.createElement("div", { className: "sidebar fixed z-1 flex w-full flex-col max-md:z-[15] md:w-[var(--drawerWidth)]", style: { "--drawerWidth": `${styles_1.drawerWidth}px` } },
-        react_1.default.createElement("div", { className: `h-[calc(var(--deviceHeight)_-_48px)] flex-col bg-sidebar-background pt-5 md:h-screen ${isMenuOpen ? "flex" : "hidden md:flex"}`, style: { "--deviceHeight": `${deviceHeight}px` } },
-            react_1.default.createElement("div", { className: "sidebar__logo px-4" }, Logo !== null && Logo !== void 0 ? Logo : uxfLogo),
-            menuConfiguration && menuConfiguration.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: `sidebar__nav grow overflow-auto px-2 md:px-0 ${menuConfiguration[0].type === "super-section" ? "mt-4" : "mt-8"}` },
-                    react_1.default.createElement(menu_1.Menu, { menu: menuConfiguration })),
-                react_1.default.createElement(user_menu_1.UserMenu, { menu: menuConfiguration })))),
-        menuConfiguration && react_1.default.createElement(mobile_bar_1.MobileBar, { menuConfiguration: menuConfiguration, toggleMenu: toggleMenu }))));
+    return ((_a = props.CustomSidebar) !== null && _a !== void 0 ? _a : (react_1.default.createElement("div", { className: "uxf-cms-sidebar", style: { "--drawer-width": `${styles_1.drawerWidth}px` } },
+        react_1.default.createElement("div", { className: `uxf-cms-sidebar__content ${isMenuOpen ? "uxf-cms-sidebar__content--open" : "uxf-cms-sidebar__content--closed"}`, style: { "--device-height": `${deviceHeight}px` } },
+            react_1.default.createElement("div", { className: "uxf-cms-sidebar__logo" }, (_b = props.Logo) !== null && _b !== void 0 ? _b : uxfLogo),
+            props.menuConfiguration && props.menuConfiguration.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: `uxf-cms-sidebar__nav ${props.menuConfiguration[0].type === "super-section" ? "mt-4" : "mt-8"}` },
+                    react_1.default.createElement(menu_1.Menu, { menu: props.menuConfiguration })),
+                react_1.default.createElement(user_menu_1.UserMenu, { menu: props.menuConfiguration })))),
+        props.menuConfiguration && (react_1.default.createElement(mobile_bar_1.MobileBar, { menuConfiguration: props.menuConfiguration, toggleMenu: toggleMenu })))));
 };
 exports.Sidebar = Sidebar;

package/lib/login-layout/login-layout.js

@@ -8,14 +8,12 @@ const head_1 = __importDefault(require("next/head"));
 const react_1 = __importDefault(require("react"));
 const paper_1 = require("@uxf/ui/paper/paper");
 const LoginLayout = (props) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { hideTitle, title, subTitle, pageTitle, children, Logo } = props;
-    return (react_1.default.createElement("div", { className: "flex min-h-screen flex-col items-center justify-center bg-gray-100 p-4 dark:bg-gray-900 dark:text-darkHigh" },
+    return (react_1.default.createElement("div", { className: "uxf-cms-login-layout" },
         react_1.default.createElement(head_1.default, null,
-            react_1.default.createElement("title", null, pageTitle || "")),
-        Logo && react_1.default.createElement("div", { className: "mb-8" }, Logo),
-        title && react_1.default.createElement("h1", { className: hideTitle ? "sr-only" : "uxf-typo-h4" }, title),
-        subTitle && react_1.default.createElement("p", { className: "uxf-typo-body mt-2 text-lightMedium" }, subTitle),
-        react_1.default.createElement(paper_1.Paper, { className: "mt-8 w-[448px] max-w-full p-6 dark:bg-gray-950" }, children)));
+            react_1.default.createElement("title", null, props.pageTitle || "")),
+        props.Logo && react_1.default.createElement("div", { className: "uxf-cms-login-layout__logo-wrapper" }, props.Logo),
+        props.title && (react_1.default.createElement("h1", { className: `uxf-cms-login-layout__title ${props.hideTitle ? "uxf-cms-login-layout__title--hidden" : ""}` }, props.title)),
+        props.subTitle && react_1.default.createElement("p", { className: "uxf-cms-login-layout__subtitle" }, props.subTitle),
+        react_1.default.createElement(paper_1.Paper, { className: "uxf-cms-login-layout__body" }, props.children)));
 };
 exports.LoginLayout = LoginLayout;

package/lib/menu/mobile-bar.d.ts

@@ -1,6 +1,8 @@
 import { FC } from "react";
 import { MenuItem } from "./model";
-export declare const MobileBar: FC<{
+interface Props {
     menuConfiguration: MenuItem[];
     toggleMenu: () => void;
-}>;
+}
+export declare const MobileBar: FC<Props>;
+export {};

package/lib/menu/mobile-bar.js

@@ -12,11 +12,9 @@ const config_1 = require("../../config");
 const avatar_1 = require("@uxf/ui/avatar");
 const cx_1 = require("@uxf/core/utils/cx");
 const MobileBar = (props) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { menuConfiguration, toggleMenu } = props;
     const useLoggedUser = config_1.container.get("useLoggedUser");
     const loggedUser = useLoggedUser();
-    const mobileBarMenu = menuConfiguration
+    const mobileBarMenu = props.menuConfiguration
         .flatMap((item) => {
         if (item.type === "link" || item.type === "section") {
             return item;
@@ -32,16 +30,16 @@ const MobileBar = (props) => {
         .filter((i) => i)
         .filter((item) => (item === null || item === void 0 ? void 0 : item.isVisible(loggedUser)) && (!item.children.length || item.hasVisibleChildren(loggedUser)))
         .splice(0, 4);
-    const buttonClassName = (0, cx_1.cx)("flex h-10 grow items-center justify-center shrink-0", mobileBarMenu.length === 2 && "w-1/3", mobileBarMenu.length === 3 && "w-1/4", mobileBarMenu.length === 4 && "w-1/5");
-    return (react_1.default.createElement("div", { className: "fixed inset-x-0 bottom-0 flex h-16 items-center border-t border-gray-700 bg-sidebar-background px-1 text-darkMedium md:hidden" },
+    const buttonClassName = (0, cx_1.cx)("uxf-cms-mobile-bar__button", mobileBarMenu.length === 2 && "w-1/3", mobileBarMenu.length === 3 && "w-1/4", mobileBarMenu.length === 4 && "w-1/5");
+    return (react_1.default.createElement("div", { className: "uxf-cms-mobile-bar" },
         mobileBarMenu.map((item, index) => {
             var _a, _b, _c, _d;
             if (item.children.length) {
                 return (react_1.default.createElement(sub_menu_mobile_1.SubMenuMobile, { key: index, content: item.children, title: item.title },
                     react_1.default.createElement("button", { type: "button", className: buttonClassName }, item.userMenuData ? (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(avatar_1.Avatar, { className: "h-7 w-7", src: item.userMenuData.avatar }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(avatar_1.Avatar, { className: "uxf-cms-mobile-bar__avatar", src: item.userMenuData.avatar }))) : (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(icon_1.Icon, { name: (_a = item.icon) !== null && _a !== void 0 ? _a : "", size: 24 }),
-                        react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: "ml-1" }))))));
+                        react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: "uxf-cms-mobile-bar__caret" }))))));
             }
             if (item.url || item.route) {
                 return (react_1.default.createElement(link_1.default, { key: index, href: (_b = item.url) !== null && _b !== void 0 ? _b : config_1.container.get("route")(item.route, item.routeParams), target: item.isExternal ? "_blank" : undefined, rel: item.isExternal ? "noreferrer noopener" : undefined, className: buttonClassName },
@@ -50,7 +48,7 @@ const MobileBar = (props) => {
             return (react_1.default.createElement("span", { key: index, className: buttonClassName },
                 react_1.default.createElement(icon_1.Icon, { name: (_d = item.icon) !== null && _d !== void 0 ? _d : "user", size: 24 })));
         }),
-        react_1.default.createElement("button", { type: "button", className: buttonClassName, onClick: toggleMenu },
+        react_1.default.createElement("button", { type: "button", className: buttonClassName, onClick: props.toggleMenu },
             react_1.default.createElement(icon_1.Icon, { name: "bars", size: 24 }))));
 };
 exports.MobileBar = MobileBar;

package/lib/menu/ui/list-item/list-item.js

@@ -9,27 +9,27 @@ const icon_1 = require("@uxf/ui/icon");
 const link_1 = __importDefault(require("next/link"));
 const sub_menu_1 = require("../sub-menu/sub-menu");
 const config_1 = require("../../../../config");
+const classes_1 = require("@uxf/core/constants/classes");
 const ListItem = (props) => {
+    var _a, _b, _c, _d;
+    const hasSubMenu = !!((_a = props.subMenu) === null || _a === void 0 ? void 0 : _a.length);
+    const Content = (_b = props.children) !== null && _b !== void 0 ? _b : (react_1.default.createElement("div", { className: `uxf-cms-menu__item uxf-cms-menu__item--basic ${props.selected ? classes_1.CLASSES.IS_SELECTED : ""}` },
+        react_1.default.createElement("div", { className: `uxf-cms-menu__icon-wrapper ${props.level === 1 ? "uxf-cms-menu__icon-wrapper--level-one" : ""}` }, !!props.icon && props.level !== 1 && react_1.default.createElement(icon_1.Icon, { name: props.icon, size: 16 })),
+        react_1.default.createElement("div", { className: "uxf-cms-menu__item-label" }, props.label),
+        hasSubMenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `uxf-cms-menu__caret ${!props.isOpen ? classes_1.CLASSES.IS_OPEN : ""}` }))));
     // eslint-disable-next-line react/destructuring-assignment
-    const { children, icon, label, level = 0, selected, href, route, params, subMenu, isOpen, toggle, isInitiallyOpen, isExternal, } = props;
-    const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
-    const Content = children !== null && children !== void 0 ? children : (react_1.default.createElement("div", { className: `mb-0.5 flex cursor-pointer items-center rounded-lg py-2.5 pl-2.5 pr-1 hover:bg-sidebar-hover ${selected ? "bg-sidebar-highlight font-bold text-darkHigh" : "bg-sidebar-background text-darkMedium"}` },
-        react_1.default.createElement("div", { className: level === 1 ? "w-9" : "w-7" }, !!icon && level !== 1 && react_1.default.createElement(icon_1.Icon, { name: icon, size: 16 })),
-        react_1.default.createElement("div", { className: "uxf-typo-body2" }, label),
-        hasSubMenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `ml-auto mr-2 ${!isOpen ? "-rotate-90" : ""}` }))));
-    // eslint-disable-next-line react/destructuring-assignment
-    const Button = ({ className }) => (react_1.default.createElement("button", { type: "button", onClick: toggle, className: className }, Content));
-    if (href || route) {
-        if (hasSubMenu && !isInitiallyOpen) {
+    const Button = ({ className }) => (react_1.default.createElement("button", { type: "button", onClick: props.toggle, className: className }, Content));
+    if (props.href || props.route) {
+        if (props.subMenu && hasSubMenu && !props.isInitiallyOpen) {
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(sub_menu_1.SubMenu, { content: subMenu },
-                    react_1.default.createElement(link_1.default, { href: href !== null && href !== void 0 ? href : config_1.container.get("route")(route, params), target: isExternal ? "_blank" : undefined, rel: isExternal ? "noreferrer noopener" : undefined }, Content)),
-                react_1.default.createElement(Button, { className: "w-full md:hidden" })));
+                react_1.default.createElement(sub_menu_1.SubMenu, { content: props.subMenu },
+                    react_1.default.createElement(link_1.default, { href: (_c = props.href) !== null && _c !== void 0 ? _c : config_1.container.get("route")(props.route, props.params), target: props.isExternal ? "_blank" : undefined, rel: props.isExternal ? "noreferrer noopener" : undefined }, Content)),
+                react_1.default.createElement(Button, { className: "uxf-cms-menu__submenu-button uxf-cms-menu__submenu-button--initially-closed" })));
         }
         if (hasSubMenu) {
-            return react_1.default.createElement(Button, { className: "w-full md:pointer-events-none" });
+            return react_1.default.createElement(Button, { className: "uxf-cms-menu__submenu-button uxf-cms-menu__submenu-button--initially-open" });
         }
-        return (react_1.default.createElement(link_1.default, { href: href !== null && href !== void 0 ? href : config_1.container.get("route")(route, params), target: isExternal ? "_blank" : undefined, rel: isExternal ? "noreferrer noopener" : undefined }, Content));
+        return (react_1.default.createElement(link_1.default, { href: (_d = props.href) !== null && _d !== void 0 ? _d : config_1.container.get("route")(props.route, props.params), target: props.isExternal ? "_blank" : undefined, rel: props.isExternal ? "noreferrer noopener" : undefined }, Content));
     }
     return Content;
 };

package/lib/menu/ui/menu-custom-item.js

@@ -7,13 +7,11 @@ exports.MenuCustomItem = void 0;
 const react_1 = __importDefault(require("react"));
 const config_1 = require("../../../config");
 const MenuCustomItem = (props) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { item } = props;
     const useLoggedUser = config_1.container.get("useLoggedUser");
     const loggedUser = useLoggedUser();
-    if (!item.isVisible(loggedUser)) {
+    if (!props.item.isVisible(loggedUser)) {
         return null;
     }
-    return react_1.default.createElement("div", null, item.content);
+    return react_1.default.createElement("div", null, props.item.content);
 };
 exports.MenuCustomItem = MenuCustomItem;

package/lib/menu/ui/menu-item.js

@@ -30,24 +30,23 @@ const list_item_1 = require("./list-item");
 const router_1 = require("next/router");
 const MenuItem = (props) => {
     var _a, _b, _c, _d;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { item } = props;
     const router = (0, router_1.useRouter)();
     const activeRoute = config_1.container.get("useActiveRoute")();
-    const isActive = item.isActive(router, activeRoute);
-    const hasActiveChildren = item.hasActiveChildren(router, activeRoute);
+    const isActive = props.item.isActive(router, activeRoute);
+    const hasActiveChildren = props.item.hasActiveChildren(router, activeRoute);
     const useLoggedUser = config_1.container.get("useLoggedUser");
     const loggedUser = useLoggedUser();
-    const visibleChildren = item.children.filter((i) => i.isVisible(loggedUser));
+    const visibleChildren = props.item.children.filter((i) => i.isVisible(loggedUser));
     const firstVisibleChild = visibleChildren.length !== 0 ? visibleChildren[0] : undefined;
-    const isInitiallyOpen = (isActive || hasActiveChildren) && item.children.length > 0;
+    const isInitiallyOpen = (isActive || hasActiveChildren) && props.item.children.length > 0;
     const [isSubmenuOpen, setIsSubmenuOpen] = (0, react_1.useState)(isInitiallyOpen);
     const toggle = () => setIsSubmenuOpen((prev) => !prev);
-    if (!item.isVisible(loggedUser) || (item.children.length !== 0 && !item.hasVisibleChildren(loggedUser))) {
+    if (!props.item.isVisible(loggedUser) ||
+        (props.item.children.length !== 0 && !props.item.hasVisibleChildren(loggedUser))) {
         return null;
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(list_item_1.ListItem, { label: item.title, icon: item.icon, href: (_a = item.url) !== null && _a !== void 0 ? _a : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.url, route: (_b = item.route) !== null && _b !== void 0 ? _b : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.route, params: (_d = (_c = item.routeParams) !== null && _c !== void 0 ? _c : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.routeParams) !== null && _d !== void 0 ? _d : null, selected: isActive, subMenu: item.children, isOpen: isSubmenuOpen, toggle: toggle, isInitiallyOpen: isInitiallyOpen, isExternal: item.isExternal }),
+        react_1.default.createElement(list_item_1.ListItem, { label: props.item.title, icon: props.item.icon, href: (_a = props.item.url) !== null && _a !== void 0 ? _a : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.url, route: (_b = props.item.route) !== null && _b !== void 0 ? _b : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.route, params: (_d = (_c = props.item.routeParams) !== null && _c !== void 0 ? _c : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.routeParams) !== null && _d !== void 0 ? _d : null, selected: isActive, subMenu: props.item.children, isOpen: isSubmenuOpen, toggle: toggle, isInitiallyOpen: isInitiallyOpen, isExternal: props.item.isExternal }),
         isSubmenuOpen && (react_1.default.createElement("div", null, visibleChildren.map((i) => {
             const isSelected = i.isActive(router, activeRoute);
             return (react_1.default.createElement(list_item_1.ListItem, { key: i.title, label: i.title, href: i.url, icon: i.icon, route: i.route, params: i.routeParams, level: 1, selected: isSelected, isExternal: i.isExternal }));

package/lib/menu/ui/menu-super-section-item.js

@@ -29,13 +29,11 @@ const config_1 = require("../../../config");
 const menu_item_1 = require("./menu-item");
 const menu_custom_item_1 = require("./menu-custom-item");
 const MenuSuperSectionItem = (props) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { item } = props;
     const useLoggedUser = config_1.container.get("useLoggedUser");
     const loggedUser = useLoggedUser();
-    return (react_1.default.createElement("div", { className: item.userMenuData ? "md:hidden" : undefined },
-        item.isVisible(loggedUser) && (react_1.default.createElement("p", { className: "uxf-typo-overline mb-3 mt-6 pl-2 uppercase text-darkLow" }, item.title)),
-        item.children.map((i, index) => (react_1.default.createElement(react_1.Fragment, { key: index },
+    return (react_1.default.createElement("div", { className: props.item.userMenuData ? "md:hidden" : undefined },
+        props.item.isVisible(loggedUser) && (react_1.default.createElement("p", { className: "uxf-cms-menu__item uxf-cms-menu__item--super" }, props.item.title)),
+        props.item.children.map((i, index) => (react_1.default.createElement(react_1.Fragment, { key: index },
             i.type === "custom" && react_1.default.createElement(menu_custom_item_1.MenuCustomItem, { item: i }),
             (i.type === "section" || i.type === "link") && react_1.default.createElement(menu_item_1.MenuItem, { item: i }))))));
 };

package/lib/menu/ui/menu.js

@@ -29,7 +29,7 @@ const menu_item_1 = require("./menu-item");
 const menu_custom_item_1 = require("./menu-custom-item");
 const menu_super_section_item_1 = require("./menu-super-section-item");
 const Menu = (props) => {
-    return (react_1.default.createElement("div", { className: "bg-sidebar-background px-2 pb-4" }, props.menu.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index },
+    return (react_1.default.createElement("div", { className: "uxf-cms-menu" }, props.menu.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index },
         item.type === "custom" && react_1.default.createElement(menu_custom_item_1.MenuCustomItem, { item: item }),
         item.type === "super-section" && react_1.default.createElement(menu_super_section_item_1.MenuSuperSectionItem, { item: item }),
         (item.type === "section" || item.type === "link") && react_1.default.createElement(menu_item_1.MenuItem, { item: item }))))));

package/lib/menu/ui/sub-menu/{sub-menuItem.js → sub-menu-item.js}

@@ -9,16 +9,14 @@ const config_1 = require("../../../../config");
 const link_1 = __importDefault(require("next/link"));
 const SubMenuItem = (props) => {
     var _a;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { item } = props;
     const useLoggedUser = config_1.container.get("useLoggedUser");
     const loggedUser = useLoggedUser();
-    if (!item.isVisible(loggedUser)) {
+    if (!props.item.isVisible(loggedUser)) {
         return null;
     }
-    const Content = (react_1.default.createElement("div", { className: "hover:text-darkLight w-full bg-sidebar-highlight px-4 py-3.5 text-body text-darkMedium hover:bg-sidebar-background md:text-body2" }, item.title));
-    if (item.url || item.route) {
-        return (react_1.default.createElement(link_1.default, { href: (_a = item.url) !== null && _a !== void 0 ? _a : config_1.container.get("route")(item.route, item.routeParams), target: item.isExternal ? "_blank" : undefined, rel: item.isExternal ? "noreferrer noopener" : undefined }, Content));
+    const Content = react_1.default.createElement("div", { className: "uxf-cms-sub-menu__item" }, props.item.title);
+    if (props.item.url || props.item.route) {
+        return (react_1.default.createElement(link_1.default, { href: (_a = props.item.url) !== null && _a !== void 0 ? _a : config_1.container.get("route")(props.item.route, props.item.routeParams), target: props.item.isExternal ? "_blank" : undefined, rel: props.item.isExternal ? "noreferrer noopener" : undefined }, Content));
     }
     return Content;
 };

package/lib/menu/ui/sub-menu/sub-menu-mobile.js

@@ -28,7 +28,7 @@ const react_1 = __importStar(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const use_sub_menu_1 = require("./use-sub-menu");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
-const sub_menuItem_1 = require("./sub-menuItem");
+const sub_menu_item_1 = require("./sub-menu-item");
 exports.SubMenuMobile = (0, forwardRef_1.forwardRef)("SubMenuMobile", ({ children, content, title }, ref) => {
     const subMenu = (0, use_sub_menu_1.useSubMenu)({ isMobile: true });
     const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, subMenu.refs.setReference, children.ref), [ref, subMenu.refs.setReference, children]);
@@ -39,10 +39,10 @@ exports.SubMenuMobile = (0, forwardRef_1.forwardRef)("SubMenuMobile", ({ childre
             "data-state": subMenu.open ? "open" : "closed",
         })),
         subMenu.open && (react_1.default.createElement("div", { ...subMenu.getFloatingProps({
-                className: "sidebar__scrollbar bg-sidebar-background rounded-xl overflow-y-auto z-dropdown w-[calc(100vw_-_32px)] shadow-lg left-4",
+                className: "uxf-cms-sidebar__scrollbar uxf-cms-sub-menu__wrapper-mobile",
                 ref: subMenu.refs.setFloating,
                 style: subMenu.floatingStyles,
             }) },
-            react_1.default.createElement("div", { className: "uxf-typo-body w-full bg-sidebar-background px-4 py-3.5 font-bold text-darkHigh" }, title),
-            content.map((item, index) => (react_1.default.createElement(sub_menuItem_1.SubMenuItem, { key: index, item: item })))))));
+            react_1.default.createElement("div", { className: "uxf-cms-sub-menu__title" }, title),
+            content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { key: index, item: item })))))));
 });

package/lib/menu/ui/sub-menu/sub-menu.js

@@ -28,11 +28,11 @@ const react_1 = __importStar(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const use_sub_menu_1 = require("./use-sub-menu");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
-const sub_menuItem_1 = require("./sub-menuItem");
+const sub_menu_item_1 = require("./sub-menu-item");
 exports.SubMenu = (0, forwardRef_1.forwardRef)("SubMenu", ({ children, content }, ref) => {
     const subMenu = (0, use_sub_menu_1.useSubMenu)({ isMobile: false });
     const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, subMenu.refs.setReference, children.ref), [ref, subMenu.refs.setReference, children]);
-    return (react_1.default.createElement("div", { className: "hidden md:block" },
+    return (react_1.default.createElement("div", { className: "uxf-cms-sub-menu" },
         (0, react_1.cloneElement)(children, subMenu.getReferenceProps({
             ref: stableRef,
             ...children.props,
@@ -41,6 +41,6 @@ exports.SubMenu = (0, forwardRef_1.forwardRef)("SubMenu", ({ children, content }
         subMenu.open && (react_1.default.createElement("div", { ...subMenu.getFloatingProps({
                 ref: subMenu.refs.setFloating,
                 style: subMenu.floatingStyles,
-                className: "sidebar__scrollbar bg-sidebar-highlight rounded-xl overflow-y-auto z-dropdown max-w-64 shadow-lg w-full",
-            }) }, content.map((item, index) => (react_1.default.createElement(sub_menuItem_1.SubMenuItem, { key: index, item: item })))))));
+                className: "uxf-cms-sidebar__scrollbar uxf-cms-sub-menu__wrapper",
+            }) }, content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { key: index, item: item })))))));
 });

package/lib/menu/ui/user-menu.js

@@ -28,24 +28,23 @@ const react_1 = __importStar(require("react"));
 const avatar_1 = require("@uxf/ui/avatar");
 const icon_1 = require("@uxf/ui/icon");
 const list_item_1 = require("./list-item");
+const classes_1 = require("@uxf/core/constants/classes");
 const Component = (props) => {
     const [isSubmenuOpen, setIsSubmenuOpen] = (0, react_1.useState)(false);
     const hasSubmenu = props.submenu.length > 0;
     const toggle = hasSubmenu ? () => setIsSubmenuOpen((prev) => !prev) : undefined;
-    return (react_1.default.createElement("div", { className: "hidden border-t border-t-darkLow/10 p-3 pr-5 text-darkMedium md:block" },
-        react_1.default.createElement("button", { className: "flex w-full items-center text-left", onClick: toggle },
-            react_1.default.createElement(avatar_1.Avatar, { className: "mr-3 shrink-0", src: props.avatar }),
-            react_1.default.createElement("div", { className: "truncate" },
-                react_1.default.createElement("div", { className: "uxf-typo-body2 mb-1" }, props.name),
-                react_1.default.createElement("div", { className: "uxf-typo-caption truncate text-darkLow" }, props.roles)),
-            react_1.default.createElement("div", { className: "ml-auto" }, hasSubmenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `ml-2 ${!isSubmenuOpen ? "-rotate-90" : ""}` })))),
-        isSubmenuOpen && (react_1.default.createElement("div", { className: "mt-4" }, props.submenu.map((item, index) => (react_1.default.createElement(list_item_1.ListItem, { label: item.title, route: item.route, params: item.routeParams, icon: item.icon, key: index })))))));
+    return (react_1.default.createElement("div", { className: "uxf-cms-user-menu" },
+        react_1.default.createElement("button", { className: "uxf-cms-user-menu__button", onClick: toggle },
+            react_1.default.createElement(avatar_1.Avatar, { className: "uxf-cms-user-menu__avatar", src: props.avatar }),
+            react_1.default.createElement("div", { className: "uxf-cms-user-menu__label-wrapper" },
+                react_1.default.createElement("div", { className: "uxf-cms-user-menu__name" }, props.name),
+                react_1.default.createElement("div", { className: "uxf-cms-user-menu__roles" }, props.roles)),
+            react_1.default.createElement("div", { className: "uxf-cms-user-menu__caret-wrapper" }, hasSubmenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `uxf-cms-user-menu__caret ${!isSubmenuOpen ? classes_1.CLASSES.IS_OPEN : ""}` })))),
+        isSubmenuOpen && (react_1.default.createElement("div", { className: "uxf-cms-user-menu__sub-menu" }, props.submenu.map((item, index) => (react_1.default.createElement(list_item_1.ListItem, { label: item.title, route: item.route, params: item.routeParams, icon: item.icon, key: index })))))));
 };
 const UserMenu = (props) => {
     var _a, _b, _c, _d, _e, _f;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { menu } = props;
-    const userMenu = menu.find((item) => !!item.userMenuData);
+    const userMenu = props.menu.find((item) => !!item.userMenuData);
     return (react_1.default.createElement(Component, { submenu: (_a = userMenu === null || userMenu === void 0 ? void 0 : userMenu.children) !== null && _a !== void 0 ? _a : [], name: (_c = (_b = userMenu === null || userMenu === void 0 ? void 0 : userMenu.userMenuData) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : "Uživatel", roles: (_e = (_d = userMenu === null || userMenu === void 0 ? void 0 : userMenu.userMenuData) === null || _d === void 0 ? void 0 : _d.roles) !== null && _e !== void 0 ? _e : "nepřihlášený", avatar: (_f = userMenu === null || userMenu === void 0 ? void 0 : userMenu.userMenuData) === null || _f === void 0 ? void 0 : _f.avatar }));
 };
 exports.UserMenu = UserMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/cms",
-  "version": "10.0.0-beta.12",
+  "version": "10.0.0-beta.14",
   "description": "UXF Cms",
   "author": "UXFans <dev@uxf.cz>",
   "homepage": "https://gitlab.com/uxf-npm/cms#readme",

package/ui/styles/breadcrumbs.css

@@ -0,0 +1,30 @@
+.uxf-cms-breadcrumbs {
+    @apply uxf-typo-body;
+
+    align-items: center;
+    color: theme("colors.lightLow");
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: theme("spacing.4");
+
+    &__item {
+        margin-right: theme("spacing.2");
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    &__divide-icon {
+        margin-right: theme("spacing.2");
+        display: inline;
+    }
+
+    &__link {
+        @apply transition-colors;
+
+        &:hover {
+            color: theme("colors.lightHigh");
+        }
+    }
+}

package/ui/styles/layout.css

@@ -0,0 +1,124 @@
+.uxf-cms-layout {
+    display: flex;
+
+    &__wrapper {
+        display: flex;
+        width: 100%;
+
+        :root .light & {
+            background-color: theme('colors.gray.100');
+        }
+
+        :root .dark & {
+            background-color: theme('colors.gray.900');
+            color: theme('colors.darkHigh');
+        }
+    }
+
+    &__main {
+        --drawer-width: 264px;
+
+        min-height: 100vh;
+        padding-bottom: theme('spacing.16');
+        width: 100%;
+
+        @media screen(md) {
+            margin-left: var(--drawer-width);
+            padding-bottom: 0;
+            width: calc(100% - var(--drawer-width));
+        }
+
+    }
+
+    &__loading {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: theme('spacing.96');
+        justify-content: center;
+
+        &-inner {
+            text-align: center;
+        }
+
+        &-text {
+            margin-top: theme('spacing.2');
+        }
+    }
+
+    &__header {
+        :root .light & {
+            background-color: theme('colors.white');
+        }
+
+        :root .dark & {
+            background-color: theme('colors.gray.950');
+        }
+
+        &--sticky {
+            box-shadow: theme('boxShadow.md');
+            position: sticky;
+            top: 0;
+            z-index: 10;
+
+            :root .light & {
+                background-color: theme('colors.white');
+            }
+
+            :root .dark & {
+                background-color: theme('colors.gray.950');
+            }
+        }
+    }
+
+    &__toolbar {
+        align-items: center;
+        background-color: theme('colors.sidebar.background');
+        display: flex;
+        height: theme('spacing.12');
+        justify-content: flex-end;
+        padding: 0 theme('spacing.6');
+
+        :root .light & {
+            color: theme('colors.darkMedium');
+        }
+
+        :root .dark & {
+            color: theme('colors.lightMedium');
+        }
+
+    }
+
+    &__container {
+        margin: 0 auto;
+        padding: 0 theme('spacing.4');
+
+        @media screen(md) {
+            padding-left: theme('spacing.10');
+            padding-right: theme('spacing.10');
+        }
+
+        &--basic {
+            padding-bottom: theme('spacing.9');
+            padding-top: theme('spacing.12');
+        }
+
+        &--narrow {
+            max-width: 49.25rem;
+        }
+
+        &--wide {
+            max-width: 64rem;
+        }
+    }
+
+    &__title-wrapper {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &__title {
+        @apply uxf-typo-h4;
+    }
+}

package/ui/styles/login-layout.css

@@ -0,0 +1,52 @@
+.uxf-cms-login-layout {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 100vh;
+    padding: theme('spacing.4');
+
+    :root .light & {
+        background-color: theme('colors.gray.100');
+    }
+
+    :root .dark & {
+        background-color: theme('colors.gray.900');
+        color: theme('colors.darkHigh');
+    }
+
+    &__logo-wrapper {
+        margin-bottom: theme('spacing.8');
+    }
+
+    &__title {
+        @apply uxf-typo-h4;
+
+        &--hidden {
+            @apply sr-only;
+        }
+    }
+
+    &__subtitle {
+        margin-top: theme('spacing.2');
+
+        :root .light & {
+            color: theme('colors.lightMedium');
+        }
+
+        :root .dark & {
+            color: theme('colors.darkMedium');
+        }
+    }
+
+    &__body {
+        margin-top: theme('spacing.8');
+        max-width: 100%;
+        padding: theme('spacing.6');
+        width: 28rem;
+
+        :root .dark & {
+            background-color: theme('colors.gray.950');
+        }
+    }
+}

package/ui/styles/menu.css

@@ -0,0 +1,184 @@
+.uxf-cms-menu {
+    background-color: theme('colors.sidebar.background');
+    padding: 0 theme('spacing.2') theme('spacing.4');
+
+    &__item {
+        &--super {
+            @apply uxf-typo-overline;
+
+            color: theme('colors.darkLow');
+            margin-bottom: theme('spacing.3');
+            margin-top: theme('spacing.6');
+            padding-left: theme('spacing.2');
+            text-transform: uppercase;
+        }
+
+        &--basic {
+            align-items: center;
+            background-color: theme('colors.sidebar.background');
+            border-radius: theme('borderRadius.lg');
+            color: theme('colors.darkMedium');
+            cursor: pointer;
+            display: flex;
+            margin-bottom: theme('spacing[0.5]');
+            padding: theme('spacing[2.5]') theme('spacing.1') theme('spacing[2.5]') theme('spacing[2.5]');
+
+            &:hover {
+                background-color: theme('colors.sidebar.hover');
+            }
+
+            &.is-selected {
+                background-color: theme('colors.sidebar.highlight');
+                color: theme('colors.darkHigh');
+                font-weight: bold;
+            }
+
+            .uxf-cms-menu__icon-wrapper {
+                width: theme('spacing.7');
+
+                &--level-one {
+                    width: theme('spacing.9');
+                }
+            }
+
+            .uxf-cms-menu__caret {
+                margin-left: auto;
+                margin-right: theme('spacing.2');
+
+                &.is-open {
+                    transform: rotate(-90deg);
+                }
+            }
+        }
+    }
+
+    &__submenu-button {
+        width: 100%;
+
+        &--initially-closed {
+            @media screen(md) {
+                display: none;
+            }
+        }
+
+        &--initially-open {
+            @media screen(md) {
+                pointer-events: none;
+            }
+        }
+    }
+}
+
+.uxf-cms-user-menu {
+    color: theme('colors.darkMedium');
+    display: none;
+    padding: theme('spacing.3') theme('spacing.5') theme('spacing.3') theme('spacing.3');
+
+    :root .light & {
+        border-top: 1px solid theme('colors.darkLow/10');
+    }
+
+    :root .dark & {
+        border-top: 1px solid theme('colors.gray.700/10');
+    }
+
+    @media screen(md) {
+        display: block;
+    }
+
+    &__button {
+        align-items: center;
+        display: flex;
+        text-align: left;
+        width: 100%;
+    }
+
+    &__avatar {
+        flex-shrink: 0;
+        margin-right: theme('spacing.3');
+    }
+
+    &__label-wrapper {
+        @apply truncate;
+    }
+
+    &__name {
+        @apply uxf-typo-body2;
+
+        margin-bottom: theme('spacing.1');
+    }
+
+    &__roles {
+        @apply uxf-typo-caption truncate;
+
+        color: theme('colors.darkLow');
+    }
+
+    &__caret-wrapper {
+        margin-left: auto;
+    }
+
+    &__caret {
+        margin-left: theme('spacing.2');
+
+        &.is-open {
+            transform: rotate(-90deg);
+        }
+    }
+
+    &__sub-menu {
+        margin-top: theme('spacing.4');
+    }
+}
+
+.uxf-cms-sub-menu {
+    display: none;
+
+    @media screen(md) {
+        display: block;
+    }
+
+    &__wrapper {
+        background-color: theme('colors.sidebar.highlight');
+        border-radius: theme('borderRadius.xl');
+        box-shadow: theme('boxShadow.lg');
+        overflow-y: auto;
+        width: 100%;
+        z-index: theme('zIndex.dropdown');
+    }
+
+    &__wrapper-mobile {
+        background-color: theme('colors.sidebar.background');
+        border-radius: theme('borderRadius.xl');
+        box-shadow: theme('boxShadow.lg');
+        left: theme('spacing.4');
+        overflow-y: auto;
+        width: calc(100vw - 32px);
+        z-index: theme('zIndex.dropdown');
+    }
+
+    &__item {
+        @apply md:text-body2;
+
+        background-color: theme('colors.sidebar.highlight');
+        color: theme('colors.darkMedium');
+        font-size: theme('fontSize.body');
+        padding: theme("spacing[3.5]");
+        width: 100%;
+
+        &:hover {
+            background-color: theme('colors.sidebar.background');
+            color: theme('colors.darkLow');
+        }
+    }
+
+    &__title {
+        @apply uxf-typo-body;
+
+        background-color: theme('colors.sidebar.background');
+        color: theme('colors.darkHigh');
+        font-weight: bold;
+        padding: theme("spacing[3.5]") theme("spacing.4");
+        width: 100%;
+    }
+}

package/ui/styles/mobile-bar.css

@@ -0,0 +1,35 @@
+.uxf-cms-mobile-bar {
+    align-items: center;
+    background-color: theme('colors.sidebar.background');
+    border-top: 1px solid theme('colors.gray.700');
+    bottom: 0;
+    color: theme('colors.darkMedium');
+    display: flex;
+    height: theme('spacing.16');
+    left: 0;
+    padding: 0 theme('spacing.1');
+    position: fixed;
+    right: 0;
+
+    @media screen(md) {
+        display: none;
+    }
+
+    &__button {
+        align-items: center;
+        display: flex;
+        flex-grow: 1;
+        flex-shrink: 0;
+        height: theme('spacing.10');
+        justify-content: center;
+    }
+
+    &__avatar {
+        height: theme('spacing.7');
+        width: theme('spacing.7');
+    }
+
+    &__caret {
+        margin-left: theme('spacing.1');
+    }
+}

package/ui/styles/sidebar.css

@@ -0,0 +1,94 @@
+.uxf-cms-sidebar {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    width: 100%;
+    z-index: 15;
+
+    @media screen(md) {
+        width: var(--drawer-width);
+        z-index: 1;
+    }
+
+    &__content {
+        --device-height: 1000px;
+
+        background-color: theme("colors.sidebar.background");
+        flex-direction: column;
+        height: calc(var(--device-height) - 48px);
+        padding-top: theme("spacing.5");
+
+        @media screen(md) {
+            height: 100vh;
+        }
+
+        &--open {
+            display: flex;
+        }
+
+        &--closed {
+            display: none;
+
+            @media screen(md) {
+                display: flex;
+            }
+        }
+    }
+
+    &__logo {
+        padding: 0 theme("spacing.4");
+    }
+
+    &__nav {
+        flex-grow: 1;
+        overflow: auto;
+        padding: 0 theme("spacing.2");
+
+        @media screen(md) {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        /* width */
+        &::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        /* Track */
+        &::-webkit-scrollbar-track {
+            background: theme("colors.sidebar.background");
+        }
+
+        /* Handle */
+        &::-webkit-scrollbar-thumb {
+            background: theme("colors.sidebar.highlight");
+        }
+
+        /* Handle on hover */
+        &::-webkit-scrollbar-thumb:hover {
+            background: theme("colors.sidebar.hover");
+        }
+    }
+
+    &__scrollbar {
+        --scrollbar-color: theme("colors.darkBorder");
+
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        scrollbar-color: var(--scrollbar-color) transparent;
+        scrollbar-width: thin;
+
+        &::-webkit-scrollbar {
+            width: theme("spacing.2");
+        }
+
+        &::-webkit-scrollbar-track {
+            background: theme("colors.sidebar.highlight");
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--scrollbar-color);
+            border-radius: 100%;
+            border: none;
+        }
+    }
+}

package/utils/styles.css

@@ -1,43 +1,6 @@
-.sidebar__nav {
-    /* width */
-    &::-webkit-scrollbar {
-        width: 4px;
-    }
-
-    /* Track */
-    &::-webkit-scrollbar-track {
-        background: theme("colors.sidebar.background");
-    }
-
-    /* Handle */
-    &::-webkit-scrollbar-thumb {
-        background: theme("colors.sidebar.highlight");
-    }
-
-    /* Handle on hover */
-    &::-webkit-scrollbar-thumb:hover {
-        background: theme("colors.sidebar.hover");
-    }
-}
-
-.sidebar__scrollbar {
-    --scrollbar-color: theme("colors.darkBorder");
-
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-    scrollbar-color: var(--scrollbar-color) transparent;
-    scrollbar-width: thin;
-
-    &::-webkit-scrollbar {
-        @apply w-2;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: theme("colors.sidebar.highlight");
-    }
-
-    &::-webkit-scrollbar-thumb {
-        @apply rounded-full border-none;
-
-        background-color: var(--scrollbar-color);
-    }
-}
+@import url("./../ui/styles/layout.css");
+@import url("./../ui/styles/login-layout.css");
+@import url("./../ui/styles/sidebar.css");
+@import url("./../ui/styles/mobile-bar.css");
+@import url("./../ui/styles/menu.css");
+@import url("./../ui/styles/breadcrumbs.css");