@rnaga/wp-next-admin 1.0.1

package/client/components/layout/Layout.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { Box } from "@mui/material";
+import { useAdminNavigation } from "../../hooks/use-admin-navigation";
+import { useSidebar } from "../../hooks/use-sidebar";
+import { useWPAdmin } from "../../wp-admin";
+import { ErrorFallback } from "../utils/ErrorFallback";
+import { Header } from "./header";
+import { Main } from "./Main";
+import { Overlay } from "./Overlay";
+import { Sidebar } from "./sidebar";
+import { Title } from "./Title";
+import { useWPTheme } from "@rnaga/wp-next-ui/ThemeRegistry";
+export const Layout = () => {
+    const wpAdmin = useWPAdmin();
+    const adminNavigation = useAdminNavigation();
+    const { wpTheme } = useWPTheme();
+    const { wp: { globalState, wpHooks, viewport }, sidebar, site, } = wpAdmin;
+    const { pathname, blogBasePath, currentPath } = adminNavigation;
+    const layoutKeys = globalState.get("layout-keys");
+    const { setMenus } = useSidebar({ globalState, viewport });
+    // Monitor pathname
+    const currentSegment = globalState.get("page-segment");
+    useEffect(() => {
+        const segment = pathname.replace(blogBasePath, "").split("/")[1];
+        if (segment !== currentSegment) {
+            // Segment has changed. Update state to refresh sidebar and main content
+            globalState.set("page-segment", segment ?? "default");
+        }
+    }, [pathname]);
+    useEffect(() => {
+        const menus = wpHooks.filter.apply("next_admin_menu", [], currentSegment, {
+            wpAdmin,
+            navigation: adminNavigation,
+        });
+        // menu items are empty. Close the sidebar
+        if (menus.length == 0) {
+            // Throw error as pagesetment is not found
+            throw new Error(`Page segment is invalid. No menu items found. - ${currentSegment}`);
+        }
+        setMenus(menus);
+    }, [currentSegment]);
+    const currentPage = globalState.get("page");
+    useEffect(() => {
+        const page = currentPath.split("/")[2];
+        if (page !== currentPage) {
+            globalState.set("page", page);
+        }
+    }, [pathname]);
+    return (_jsxs(_Fragment, { children: [_jsx(Overlay, {}), _jsx(Box, { component: "header", sx: {
+                    position: "fixed",
+                    zIndex: 2,
+                    display: "block",
+                    width: "100%",
+                    height: 50,
+                }, children: _jsx(Header, {}) }, layoutKeys.header), _jsx(Box, { children: _jsx(Sidebar, {}) }, layoutKeys.sidebar), _jsx(Box, { className: "MainContainer", sx: {
+                    display: "flex",
+                    ml: `${sidebar.state.marginLeft}px`,
+                    pt: 5,
+                    height: "100vh",
+                }, children: _jsx(Box, { sx: {
+                        p: 3,
+                        zIndex: 0,
+                        width: "100%",
+                    }, children: _jsxs(ErrorBoundary, { FallbackComponent: ErrorFallback, children: [_jsx(Title, {}), _jsx(Main, {})] }) }) }, layoutKeys.main)] }));
+};
+export default Layout;

package/client/components/layout/Main.d.ts

@@ -0,0 +1,2 @@
+export declare const Main: () => import("react").ReactNode;
+//# sourceMappingURL=Main.d.ts.map

package/client/components/layout/Main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../src/client/components/layout/Main.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,iCAchB,CAAC"}

package/client/components/layout/Main.js

@@ -0,0 +1,12 @@
+import { useCurrentMenu } from "../../hooks/use-current-menu";
+import { useWPAdmin } from "../../wp-admin";
+export const Main = () => {
+    const { wp: { error }, } = useWPAdmin();
+    const menu = useCurrentMenu();
+    if (error.message) {
+        const errorMessage = error.message;
+        throw new Error(errorMessage);
+    }
+    const component = menu && menu[0] ? menu[0].component : null;
+    return component;
+};

package/client/components/layout/Overlay.d.ts

@@ -0,0 +1,2 @@
+export declare const Overlay: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Overlay.d.ts.map

package/client/components/layout/Overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/client/components/layout/Overlay.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,OAAO,+CA2FnB,CAAC"}

package/client/components/layout/Overlay.js

@@ -0,0 +1,49 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Alert, Backdrop, IconButton, Snackbar } from "@mui/material";
+import { useWPTheme } from "@rnaga/wp-next-ui/ThemeRegistry";
+import { useAdminNavigation } from "../../hooks/use-admin-navigation";
+import { useWPAdmin } from "../../wp-admin";
+import { ModalConfirm } from "@rnaga/wp-next-ui/ModalConfirm";
+export const Overlay = () => {
+    const wpAdmin = useWPAdmin();
+    const { wpTheme } = useWPTheme();
+    const adminNavigation = useAdminNavigation();
+    const { overlay, wp: { globalState, wpHooks }, } = wpAdmin;
+    const backdropState = globalState.get("overlay-backdrop");
+    const snackbarState = globalState.get("overlay-snakbar");
+    const confirmState = globalState.get("overlay-confirm");
+    const [hooksModals, setHooksModals] = useState([]);
+    useEffect(() => {
+        const modals = wpHooks.filter.apply("next_admin_preload_modal", [], {
+            wpAdmin,
+            navigation: adminNavigation,
+        });
+        setHooksModals(modals);
+    }, []);
+    return (_jsxs(_Fragment, { children: [hooksModals, _jsx(Backdrop, { sx: { color: "#fff", zIndex: backdropState.zIndex }, open: backdropState.open, onClick: () => {
+                    backdropState.onClick && backdropState.onClick();
+                }, children: backdropState.component ?? _jsx(_Fragment, {}) }), _jsx(Snackbar, { autoHideDuration: snackbarState.type == "error" ? undefined : 3000, open: snackbarState.open, anchorOrigin: { vertical: "bottom", horizontal: "right" }, onClose: (event, reason) => {
+                    if (reason === "clickaway") {
+                        return;
+                    }
+                    overlay.snackbar.close();
+                }, children: _jsxs(Alert, { severity: snackbarState.type, sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                        justifyContent: "space-between",
+                        px: 2,
+                    }, children: [snackbarState.message, _jsx(IconButton, { onClick: () => {
+                                overlay.snackbar.close();
+                            }, children: _jsx(CloseIcon, { fontSize: "small", sx: {
+                                    height: 16,
+                                    width: 16,
+                                    mb: 0.2,
+                                } }) })] }) }), _jsx(ModalConfirm, { title: confirmState.title, message: confirmState.message, open: confirmState.isOpen, callback: confirmState.callback, onClose: () => {
+                    globalState.set("overlay-confirm", {
+                        isOpen: false,
+                    });
+                } })] }));
+};

package/client/components/layout/Title.d.ts

@@ -0,0 +1,2 @@
+export declare const Title: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Title.d.ts.map

package/client/components/layout/Title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../../src/client/components/layout/Title.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,KAAK,+CAsBjB,CAAC"}

package/client/components/layout/Title.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box } from "@mui/material";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { useCurrentMenu } from "../../hooks/use-current-menu";
+export const Title = () => {
+    const menu = useCurrentMenu();
+    const title = useMemo(() => menu && menu[0]?.label, [menu]);
+    return (_jsx(_Fragment, { children: _jsx(Box, { sx: {
+                display: "flex",
+                mb: 1,
+                gap: 1,
+                flexDirection: { xs: "column", sm: "row" },
+                alignItems: { xs: "start", sm: "center" },
+                flexWrap: "wrap",
+                justifyContent: "space-between",
+            }, children: _jsx(Typography, { size: "xlarge", bold: true, children: title }) }) }));
+};

package/client/components/layout/WrapperLayout.d.ts

@@ -0,0 +1,2 @@
+export declare const WrapperLayout: import("react").ComponentType<{}>;
+//# sourceMappingURL=WrapperLayout.d.ts.map

package/client/components/layout/WrapperLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrapperLayout.d.ts","sourceRoot":"","sources":["../../../../src/client/components/layout/WrapperLayout.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,mCAExB,CAAC"}

package/client/components/layout/WrapperLayout.js

@@ -0,0 +1,5 @@
+"use client";
+import dynamic from "next/dynamic";
+export const WrapperLayout = dynamic(async () => await import("./Layout"), {
+    ssr: false,
+});

package/client/components/layout/header/Profile.d.ts

@@ -0,0 +1,2 @@
+export declare const Profile: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Profile.d.ts.map

package/client/components/layout/header/Profile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Profile.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/layout/header/Profile.tsx"],"names":[],"mappings":"AA6CA,eAAO,MAAM,OAAO,+CAwGnB,CAAC"}

package/client/components/layout/header/Profile.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import LogoutIcon from "@mui/icons-material/Logout";
+import PersonIcon from "@mui/icons-material/Person";
+import { Avatar, Box, ClickAwayListener, Divider, IconButton, } from "@mui/material";
+import { useComputed, useSignal } from "@preact/signals-react";
+import { useUser } from "@rnaga/wp-next-core/client/hooks/use-user";
+import { useAdminNavigation } from "../../../hooks/use-admin-navigation";
+import { useSchemeToggle } from "@rnaga/wp-next-ui/hooks/use-scheme-toggle";
+import { useWPAdmin } from "../../../wp-admin";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { PopperMenu } from "@rnaga/wp-next-ui/PopperMenu";
+import { MenuItem as MuiMenuItem } from "@mui/material";
+import { useWPTheme } from "@rnaga/wp-next-ui/ThemeRegistry";
+function MenuItem(props) {
+    const { title, icon, onClick } = props;
+    return (_jsxs(MuiMenuItem, { sx: { display: "grid", gridTemplateColumns: "40% 1fr" }, onClick: onClick, children: [icon, _jsx(Typography, { children: title })] }));
+}
+export const Profile = () => {
+    const { site } = useWPAdmin();
+    const { user: currentUser } = useUser();
+    const buttonRef = useRef(null);
+    const { gotoPath, goto } = useAdminNavigation();
+    const { wpRawTheme } = useWPTheme();
+    const [open, setOpen] = useState(false);
+    const { mode, updateMode } = useSchemeToggle();
+    const dateTime = useSignal("");
+    const currentDateTime = useComputed(() => dateTime.value);
+    useEffect(() => {
+        const i = setInterval(() => {
+            dateTime.value = new Intl.DateTimeFormat("en-US", {
+                dateStyle: "short",
+                timeStyle: "long",
+                timeZone: site.settings.timezone,
+            }).format(new Date());
+        }, 1000);
+        return () => clearInterval(i);
+    }, []);
+    return (_jsx(ClickAwayListener, { onClickAway: () => {
+            open && setOpen(false);
+        }, children: _jsxs(Box, { children: [_jsx(IconButton, { ref: buttonRef, sx: {
+                        border: 0,
+                        p: 0,
+                        "&:hover": {
+                            backgroundColor: "transparent",
+                            color: "inherit",
+                        },
+                    }, component: "a", onClick: () => setOpen(!open), children: _jsx(Avatar, { sx: {
+                            color: wpRawTheme.global.colorScale[100],
+                            backgroundColor: wpRawTheme.global.colorScale[600],
+                            "&:hover": {
+                                backgroundColor: wpRawTheme.global.colorScale[500],
+                            },
+                        }, children: currentUser?.display_name[0].toUpperCase() }) }), _jsxs(PopperMenu, { anchorEl: buttonRef.current, sx: { px: 1, minWidth: 200, maxWidth: 300 }, open: open, onClose: () => setOpen(false), children: [_jsxs(Box, { sx: {
+                                display: "flex",
+                                flexDirection: "column",
+                                mx: 2,
+                                my: 1,
+                                minWidth: 150,
+                            }, children: [" ", _jsx(Typography, { size: "medium", fontWeight: 600, children: currentUser?.display_name }), _jsx(Typography, { children: currentUser?.user_email })] }), _jsx(Divider, {}), _jsx(Typography, { sx: { mx: 2, my: 1 }, children: currentDateTime }), _jsx(Divider, {}), _jsx(MenuItem, { title: "Profile", icon: _jsx(PersonIcon, {}), onClick: () => gotoPath("/profile", { segment: "blog" }) }), _jsx(MenuItem, { title: mode == "light" ? "Dark Mode" : "Light Mode", icon: mode == "light" ? _jsx(DarkModeIcon, {}) : _jsx(LightModeIcon, {}), onClick: () => {
+                                updateMode(mode == "light" ? "dark" : "light");
+                            } }), _jsx(Divider, {}), _jsx(MenuItem, { title: "Logout", icon: _jsx(LogoutIcon, {}), onClick: () => goto("/api/auth/signout") })] })] }) }));
+};

package/client/components/layout/header/index.d.ts

@@ -0,0 +1,2 @@
+export declare const Header: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/client/components/layout/header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/layout/header/index.tsx"],"names":[],"mappings":"AA0LA,eAAO,MAAM,MAAM,+CAqLlB,CAAC"}

package/client/components/layout/header/index.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import BookIcon from "@mui/icons-material/Book";
+import HomeIcon from "@mui/icons-material/Home";
+import HomeWorkIcon from "@mui/icons-material/HomeWork";
+import MiscellaneousServicesIcon from "@mui/icons-material/MiscellaneousServices";
+import PersonIcon from "@mui/icons-material/Person";
+import ViewSidebarIcon from "@mui/icons-material/ViewSidebar";
+import WebIcon from "@mui/icons-material/Web";
+import { Box, IconButton, MenuItem, MenuList } from "@mui/material";
+import { PopperMenu } from "@rnaga/wp-next-ui/PopperMenu";
+import { useWPTheme } from "@rnaga/wp-next-ui/ThemeRegistry";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { Viewport } from "@rnaga/wp-next-ui/Viewport";
+import { useAdminNavigation } from "../../../hooks/use-admin-navigation";
+import { useAdminUser } from "../../../hooks/use-admin-user";
+import { useWPAdmin } from "../../../wp-admin";
+import { Profile } from "./Profile";
+const HomeMenuItems = () => {
+    const menuItems = [];
+    const { site: currentSite, sidebar } = useWPAdmin();
+    const { adminUser } = useAdminUser();
+    const { wpTheme } = useWPTheme();
+    for (const site of adminUser?.availableSites.sites ?? []) {
+        menuItems.push(_jsx(MenuItem, { sx: {
+                "&:hover": {
+                    backgroundColor: "transparent",
+                },
+                cursor: "default",
+            }, children: _jsxs(Typography, { size: "medium", sx: {
+                    maxWidth: sidebar.px.open,
+                    textOverflow: "ellipsis",
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1,
+                }, bold: true, children: [_jsx(HomeIcon, { fontSize: "small" }), site.sitename] }) }, `${site.site_id}-0`));
+        menuItems.push(_jsx(MenuItem, { sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                ml: 1,
+                "&:hover": {
+                    backgroundColor: "transparent",
+                },
+            }, children: site.blogs?.map((blog) => (_jsx(Box, { sx: {
+                    textDecoration: "none",
+                    color: wpTheme.colorScale[800],
+                    "&:hover": {
+                        backgroundColor: wpTheme.colorScale[300],
+                    },
+                    p: 0.5,
+                }, component: "a", href: `${currentSite.basePath}/${blog.blog_id}`, children: _jsx(Typography, { sx: {
+                        maxWidth: sidebar.px.open,
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                    }, children: blog.blogname }) }, `${blog.blog_id}`))) }, `${site.site_id}-1`));
+    }
+    return menuItems;
+};
+const ManageSiteMenuItems = () => {
+    const { user } = useAdminUser();
+    const { site: currentSite, sidebar } = useWPAdmin();
+    const { gotoPath } = useAdminNavigation();
+    const menuItems = [];
+    // For users
+    if (user?.role.capabilities.has("list_users")) {
+        menuItems.push(_jsx(MenuItem, { children: _jsxs(Typography, { size: "medium", bold: true, onClick: () => gotoPath("/users", {
+                    segment: currentSite.isMultiSite ? "site" : "blog",
+                }), component: "div", sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.5,
+                }, children: [_jsx(PersonIcon, {}), "Users"] }) }, "manage-users"));
+    }
+    // For blog and sites
+    if (user?.role.capabilities.has("manage_network")) {
+        menuItems.push(_jsx(MenuItem, { children: _jsxs(Typography, { size: "medium", bold: true, onClick: () => gotoPath("/sites", {
+                    segment: currentSite.isMultiSite ? "site" : "blog",
+                }), component: "div", sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.5,
+                }, children: [_jsx(WebIcon, {}), "Sites"] }) }, "manage-sites"));
+        menuItems.push(_jsx(MenuItem, { children: _jsxs(Typography, { size: "medium", bold: true, onClick: () => gotoPath("/blogs", {
+                    segment: currentSite.isMultiSite ? "site" : "blog",
+                }), component: "div", sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.5,
+                }, children: [_jsx(BookIcon, {}), "Blogs"] }) }, "manage-blogs"));
+    }
+    return menuItems;
+};
+export const Header = () => {
+    const { wp: { viewport }, site: currentSite, sidebar, } = useWPAdmin();
+    const { user } = useAdminUser();
+    const { wpRawTheme } = useWPTheme();
+    const homeButtonRef = useRef(null);
+    const [openHomeMenu, setOpenHomeMenu] = useState(false);
+    const manageSiteButtonRef = useRef(null);
+    const [openManageSiteMenu, setOpenManageSiteMenu] = useState(false);
+    const profileKey = useMemo(() => {
+        return `profile-${currentSite.settings.timezone}-${user?.ID}`;
+    }, [currentSite.settings.timezone, user]);
+    return (_jsxs(Box
+    //variant="solid"
+    , { 
+        //variant="solid"
+        sx: {
+            py: 0.5,
+            px: 2,
+            display: "flex",
+            alignItems: "center",
+            bgcolor: wpRawTheme.global.colorScale[800],
+        }, children: [_jsx(Viewport, { device: "desktop", children: _jsx(Box, { sx: { display: "flex", minWidth: sidebar.px.open }, children: _jsx(Typography, { size: "xlarge", sx: {
+                            maxWidth: sidebar.px.open,
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            color: wpRawTheme.global.colorScale[100],
+                        }, bold: true, children: currentSite.name }) }) }), _jsx(Viewport, { device: "mobile", children: _jsx(IconButton, { onClick: () => {
+                        sidebar.toggle(sidebar.state.collapsed);
+                    }, sx: {
+                        color: wpRawTheme.global.colorScale[100],
+                        borderRadius: 1,
+                        "&:hover": {
+                            color: wpRawTheme.global.colorScale[800],
+                            backgroundColor: wpRawTheme.global.colorScale[300],
+                            borderRadius: 1,
+                        },
+                    }, children: _jsx(ViewSidebarIcon, {}) }) }), _jsxs(Box, { sx: {
+                    display: "flex",
+                    gap: viewport.isDesktop ? 1 : 0,
+                    flexGrow: 1,
+                    alignItems: "center",
+                }, children: [currentSite.isMultiSite && (_jsxs(Box, { children: [_jsxs(IconButton, { ref: homeButtonRef, component: "a", sx: {
+                                    border: 0,
+                                    gap: 1,
+                                    color: wpRawTheme.global.colorScale[100],
+                                    borderRadius: 1,
+                                    "&:hover": {
+                                        color: wpRawTheme.global.colorScale[800],
+                                        backgroundColor: wpRawTheme.global.colorScale[300],
+                                        borderRadius: 1,
+                                    },
+                                }, onClick: () => setOpenHomeMenu(!openHomeMenu), children: [_jsx(HomeWorkIcon, {}), _jsx(Viewport, { device: "desktop", children: _jsx(Typography, { bold: true, sx: {
+                                                color: wpRawTheme.global.colorScale[100],
+                                            }, children: "My Sites" }) })] }), _jsx(PopperMenu, { anchorEl: homeButtonRef.current, open: openHomeMenu, onClose: () => setOpenHomeMenu(false), sx: {
+                                    maxHeight: "50dvh",
+                                    overflowY: "auto",
+                                    minWidth: 150,
+                                    minHeight: 400,
+                                }, children: _jsx(MenuList, { children: _jsx(HomeMenuItems, {}) }) })] })), ((currentSite.isMultiSite &&
+                        user?.role.capabilities.has("list_users")) ||
+                        user?.role.capabilities.has("manage_network")) && (_jsxs(Box, { children: [_jsxs(IconButton, { ref: manageSiteButtonRef, component: "a", sx: {
+                                    border: 0,
+                                    gap: 1,
+                                    color: wpRawTheme.global.colorScale[100],
+                                    borderRadius: 1,
+                                    "&:hover": {
+                                        color: wpRawTheme.global.colorScale[800],
+                                        backgroundColor: wpRawTheme.global.colorScale[300],
+                                        borderRadius: 1,
+                                    },
+                                }, onClick: () => setOpenManageSiteMenu(!openManageSiteMenu), children: [_jsx(MiscellaneousServicesIcon, {}), _jsx(Viewport, { device: "desktop", children: _jsx(Typography, { bold: true, sx: {
+                                                color: wpRawTheme.global.colorScale[100],
+                                            }, children: "Manage Network" }) })] }), _jsx(PopperMenu, { anchorEl: manageSiteButtonRef.current, open: openManageSiteMenu, onClose: () => setOpenManageSiteMenu(false), sx: {
+                                    maxHeight: "50dvh",
+                                    overflowY: "auto",
+                                }, anchorOrigin: {
+                                    vertical: "bottom",
+                                    horizontal: "center",
+                                }, children: _jsx(MenuList, { children: _jsx(ManageSiteMenuItems, {}) }) })] }))] }), _jsx(Profile, {}, profileKey)] }));
+};

package/client/components/layout/sidebar/Collapse.d.ts

@@ -0,0 +1,4 @@
+export declare const Collapse: (props: {
+    open: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Collapse.d.ts.map

package/client/components/layout/sidebar/Collapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/layout/sidebar/Collapse.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,mDAyEhD,CAAC"}

package/client/components/layout/sidebar/Collapse.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Button, Tooltip } from "@mui/material";
+import { useWPAdmin } from "../../../wp-admin";
+import { useWPTheme } from "@rnaga/wp-next-ui/ThemeRegistry";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+export const Collapse = (props) => {
+    const { open } = props;
+    const { wpRawTheme } = useWPTheme();
+    const { sidebar, wp: { viewport }, } = useWPAdmin();
+    if (viewport.isMobile) {
+        return null;
+    }
+    const handleClick = () => {
+        if (sidebar.state.collapsed || !sidebar.state.sticked) {
+            sidebar.setState({
+                collapsed: false,
+                width: sidebar.px.open,
+                marginLeft: sidebar.px.open,
+                sticked: true,
+            });
+        }
+        else {
+            sidebar.setState({
+                collapsed: true,
+                width: sidebar.px.collapsed,
+                marginLeft: sidebar.px.collapsed,
+                sticked: false,
+            });
+        }
+    };
+    return (_jsx(Box, { component: "div", sx: {
+            position: "absolute",
+            zIndex: 1,
+            left: sidebar.state.width,
+            transition: "0.2s ease",
+            opacity: open ? "100%" : "0%",
+            width: 0,
+            height: "100dvh",
+        }, children: _jsx(Tooltip, { title: sidebar.state.sticked ? "collapse ]" : "lock", placement: "top", children: _jsx(Button, { size: "small", sx: {
+                    position: "relative",
+                    top: "90dvh",
+                    left: -20,
+                    backgroundColor: wpRawTheme.global.colorScale[600],
+                    ":hover": {
+                        backgroundColor: wpRawTheme.global.colorScale[500],
+                    },
+                    minWidth: 30,
+                    display: open ? "auto" : "none",
+                }, onClick: handleClick, children: _jsx(Typography, { size: "medium", sx: {
+                        color: wpRawTheme.global.colorScale[100],
+                    }, children: sidebar.state.sticked ? "←" : "↦" }) }) }) }));
+};

package/client/components/layout/sidebar/Menus.d.ts

@@ -0,0 +1,5 @@
+import type * as types from "../../../../types";
+export declare const Menus: (props: {
+    menus: types.client.AdminMenu[];
+}) => import("react/jsx-runtime").JSX.Element[];
+//# sourceMappingURL=Menus.d.ts.map

package/client/components/layout/sidebar/Menus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menus.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/layout/sidebar/Menus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAgIhD,eAAO,MAAM,KAAK,GAAI,OAAO;IAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;CAAE,8CAkB/D,CAAC"}

package/client/components/layout/sidebar/Menus.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { Collapse, ListItemButton, ListItemIcon, ListItemText, } from "@mui/material";
+import { useUser } from "@rnaga/wp-next-core/client/hooks/use-user";
+import { useWPTheme } from "@rnaga/wp-next-ui/ThemeRegistry";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { useAdminNavigation } from "../../../hooks/use-admin-navigation";
+import { useWPAdmin } from "../../../wp-admin";
+const hasCapability = (capabilities, user) => {
+    if (!user)
+        return false;
+    return (capabilities.filter((cap) => user.role.capabilities.has(cap)).length > 0);
+};
+const ListMenus = (props) => {
+    const { menu, index } = props;
+    const { currentPath, goto, blogBasePath } = useAdminNavigation();
+    const { sidebar } = useWPAdmin();
+    const { wpRawTheme } = useWPTheme();
+    const getPath = (path) => Array.isArray(path) ? path[0] : path ?? "/";
+    const matchPath = (currentPath, path) => path && Array.isArray(path)
+        ? path.includes(currentPath)
+        : path === currentPath;
+    return (_jsxs(ListItemButton, { selected: matchPath(currentPath, menu.path), role: "menuitem", component: "a", href: menu.onClick ? undefined : `${blogBasePath}${getPath(menu.path)}`, onClick: (e) => {
+            e.preventDefault();
+            menu.onClick
+                ? menu.onClick()
+                : goto(`${blogBasePath}${getPath(menu.path)}`);
+        }, sx: {
+            color: wpRawTheme.global.colorScale[100],
+        }, children: [_jsx(ListItemIcon, { sx: {
+                    color: wpRawTheme.global.colorScale[100],
+                    ...(sidebar.state.collapsed && {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }),
+                }, children: menu.icon }), !sidebar.state.collapsed && (_jsx(ListItemText, { children: _jsx(Typography, { size: "medium", bold: true, children: menu.label }) }))] }, index));
+};
+const NestedListMenus = (props) => {
+    const { menu, index } = props;
+    const { wpRawTheme } = useWPTheme();
+    const matchPath = (currentPath, path) => path && Array.isArray(path)
+        ? path.includes(currentPath)
+        : currentPath.startsWith(path ?? "");
+    const navigation = useAdminNavigation();
+    const [open, setOpen] = useState(matchPath(navigation.currentPath, menu.path));
+    const { user } = useUser();
+    useEffect(() => {
+        setOpen(matchPath(navigation.currentPath, menu.path));
+    }, [navigation.blogBasePath]);
+    return (_jsxs(React.Fragment, { children: [_jsxs(ListItemButton, { onClick: () => setOpen(!open), sx: {
+                    color: wpRawTheme.global.colorScale[100],
+                }, children: [_jsx(ListItemIcon, { sx: {
+                            color: wpRawTheme.global.colorScale[100],
+                        }, children: menu.icon }), _jsx(ListItemText, { children: _jsx(Typography, { size: "medium", bold: true, children: menu.label }) }), _jsx(KeyboardArrowRightIcon, { sx: { transform: open ? "rotate(90deg)" : "none" } })] }), _jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: menu.nestedMenus
+                    ?.filter((nestedNenu) => nestedNenu.displayOnSidebar)
+                    .filter((nestedMenu) => nestedMenu.capabilitiesInherit
+                    ? hasCapability(menu.capabilities ?? [], user)
+                    : hasCapability(nestedMenu.capabilities ?? [], user))
+                    .map((menu, index) => (_jsx(ListMenus, { menu: menu, index: index }, index))) })] }, index));
+};
+export const Menus = (props) => {
+    const { menus } = props;
+    const { sidebar } = useWPAdmin();
+    const { user } = useUser();
+    return menus
+        .filter((menu) => menu.displayOnSidebar)
+        .filter((menu) => {
+        return hasCapability(menu.capabilities ?? [], user);
+    })
+        .map((menu, index) => {
+        return menu.nestedMenus && !sidebar.state.collapsed ? (_jsx(NestedListMenus, { menu: menu, index: index }, index)) : (_jsx(ListMenus, { menu: menu, index: index }, index));
+    });
+};

package/client/components/layout/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export declare const Sidebar: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/client/components/layout/sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/layout/sidebar/index.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,OAAO,sDAkHnB,CAAC"}