umwd-components 0.1.793 → 0.1.794

package/dist/esm/src/components/layout/Footer.js

@@ -1,116 +0,0 @@
-"use client";
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useTheme } from '@mui/material/styles';
-import AppBar from '@mui/material/AppBar';
-import Container from '@mui/material/Container';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Grid from '@mui/material/Grid';
-import Divider from '@mui/material/Divider';
-import Stack from '@mui/material/Stack';
-import Link from 'next/link';
-import Image from 'next/image';
-import getIcon from '../../lib/getIcon.js';
-import { StyledLink } from '../StyledLink.js';
-import HomeIcon from '@mui/icons-material/Home';
-import PhoneIcon from '@mui/icons-material/Phone';
-import EmailIcon from '@mui/icons-material/Email';
-import LinkIcon from '@mui/icons-material/Link';
-import CookieConsentButtonSmall from '../common/cookie-consent/CookieConsentButtonSmall.js';
-
-function Footer({ data }) {
-    const { site_title, logo, parent_company_name, business_credentials, address, socials, disclaimer_link, privacypolicy_link, maxWidth = "lg", referal, sx = {}, useIcons = false, } = data;
-    const theme = useTheme();
-    const APIcon = getIcon("APIcon");
-    return (jsx(AppBar, { position: "relative", sx: {
-            backgroundColor: theme.palette.mode === "light"
-                ? theme.palette.primary.light
-                : theme.palette.primary.dark,
-            top: "auto",
-            bottom: 0,
-            ...sx,
-        }, component: "footer", children: jsx(Container, { maxWidth: maxWidth, children: jsx(Toolbar, { disableGutters: true, children: jsxs(Grid, { container: true, sx: { p: 2 }, spacing: 2, children: [jsx(Grid, { sx: [
-                                useIcons && {
-                                    display: "grid",
-                                    justifyContent: "center",
-                                },
-                            ], size: {
-                                xs: 12,
-                                sm: 6,
-                                md: 4
-                            }, children: jsxs(Box, { sx: {
-                                    display: { xs: "none", md: "flex" },
-                                    cursor: "pointer",
-                                    flexDirection: "column",
-                                    alignItems: "center",
-                                    justifyContent: "flex-start",
-                                    height: "100%",
-                                    textDecoration: "none",
-                                }, children: [jsx(Typography, { variant: "h6", sx: { mb: 2 }, component: "h2", children: site_title }), logo?.url !== undefined && (jsx(Link, { href: `#home`, children: jsx(Box, { sx: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                justifyContent: "center",
-                                                height: "100%",
-                                                p: 1,
-                                            }, children: jsx(Image, { src: logo.url, width: logo.width || 100, height: logo.height || 100, alt: logo.alternativeText || "site logo" }) }) }))] }) }), jsxs(Grid, { sx: [
-                                useIcons && {
-                                    display: "grid",
-                                    justifyContent: "stretch",
-                                    width: { xs: "80%", sm: "60%", md: "80%" },
-                                },
-                            ], size: {
-                                xs: 12,
-                                sm: 6,
-                                md: 4
-                            }, children: [jsx(Typography, { variant: "h6", sx: [{ mb: 2 }, useIcons && { textAlign: "center" }], component: "h2", children: "Contact Information" }), business_credentials && (jsxs(Fragment, { children: [jsx(Typography, { id: "company_name", variant: "h6", component: "h3", sx: [{ mb: 2 }, useIcons && { textAlign: "center" }], children: business_credentials.company_name }), parent_company_name && (jsxs(Typography, { id: "parent_company_name", variant: "h6", component: "h4", sx: { mb: 2, textAlign: "center" }, children: ["By ", parent_company_name] }))] })), useIcons === true ? (jsxs(Stack, { spacing: 1, children: [address && (jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(HomeIcon, {}), jsxs(Stack, { alignItems: "flex-end", children: [jsxs(Typography, { variant: "body1", children: [address.street, " ", address.street_number, " ", address.street_number_addition &&
-                                                                    address.street_number_addition] }), jsxs(Typography, { variant: "body1", children: [address.postal_code, " ", address.city] })] })] })), jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(PhoneIcon, {}), jsx(Typography, { variant: "body1", children: "+3133867606" })] }), jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(EmailIcon, {}), jsx(Typography, { variant: "body1", children: "info@jellepaulus.nl" })] }), business_credentials && (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "body1", children: "CoC:" }), jsx(Typography, { variant: "body1", children: business_credentials.coc_number })] }), jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "body1", children: "VAT:" }), jsx(Typography, { variant: "body1", align: "right", children: business_credentials.vat_number })] })] }))] })) : (jsx(Fragment, { children: address && (jsxs(Fragment, { children: [jsxs(Typography, { variant: "body1", children: [address.street, " ", address.street_number, " ", address.street_number_addition &&
-                                                        address.street_number_addition] }), jsxs(Typography, { variant: "body1", children: [address.postal_code, " ", address.city] }), business_credentials && (jsxs(Fragment, { children: [jsxs(Typography, { variant: "body1", children: [business_credentials.company_name, " by", " ", parent_company_name] }), jsxs(Typography, { variant: "body1", children: ["CoC: ", business_credentials.coc_number] }), jsxs(Typography, { variant: "body1", children: ["VAT: ", business_credentials.vat_number] })] }))] })) }))] }), jsx(Grid, { sx: [
-                                useIcons && {
-                                    display: "grid",
-                                    justifyContent: "center",
-                                },
-                            ], size: {
-                                xs: 12,
-                                sm: 6,
-                                md: 4
-                            }, children: socials && socials.length > 0 && (jsxs(Fragment, { children: [jsx(Typography, { variant: "h6", sx: { mb: 2 }, component: "h2", children: "Socials" }), jsx(Stack, { spacing: 2, sx: {
-                                            width: "min-content",
-                                            color: "primary.contrastText",
-                                            alignContent: "space-between",
-                                        }, children: socials.map((company_social, index) => {
-                                            const Icon = company_social.icon !== undefined
-                                                ? getIcon(company_social.icon)
-                                                : null;
-                                            return (jsx(StyledLink, { href: company_social.url, children: jsx(IconButton, { size: "large", children: Icon !== null ? jsx(Icon, {}) : jsx(LinkIcon, {}) }, index) }, index));
-                                        }) })] })) }), jsx(Grid, { size: 12, children: jsx(Divider, {}) }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: { xs: "column", sm: "row" }, alignItems: "center", gap: 2, justifyContent: "space-around", children: [disclaimer_link && (jsx(StyledLink, { href: disclaimer_link, children: jsx(Typography, { variant: "body1", color: "primary.contrastText", children: "Disclaimer" }) })), privacypolicy_link && (jsx(StyledLink, { href: privacypolicy_link, children: jsx(Typography, { variant: "body1", color: "primary.contrastText", children: "Privacy Policy" }) }))] }) }), jsx(Grid, { sx: {
-                                display: "flex",
-                                justifyContent: "center",
-                                alignItems: "center",
-                            }, size: {
-                                xs: 12,
-                                sm: 4
-                            }, children: jsx(CookieConsentButtonSmall, {}) }), Boolean(disclaimer_link || privacypolicy_link) && (jsx(Grid, { size: 12, children: jsx(Divider, {}) })), jsx(Grid, { sx: {
-                                display: "flex",
-                                justifyContent: "center",
-                                alignItems: "center",
-                                pb: "50px",
-                            }, size: 12, children: referal ? (referal) : (jsx(StyledLink, { href: "https://atelierpaulus.nl/", children: jsxs(Typography, { color: "primary.contrastText", sx: {
-                                        textDecoration: "underline",
-                                        verticalAlign: "middle",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        flexDirection: { xs: "column", sm: "row" },
-                                        gap: 2,
-                                    }, children: ["Design & Webdevelopment", APIcon !== null && jsx(APIcon, { sx: { mx: 2 } }), "Atelier Paulus"] }) })) })] }) }) }) }));
-}
-
-export { Footer as default };

package/dist/esm/src/components/layout/Navbar.js

@@ -1,144 +0,0 @@
-"use client";
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment as Fragment$1 } from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
-import Dialog from '@mui/material/Dialog';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import Button from '@mui/material/Button';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import Divider from '@mui/material/Divider';
-import ListItemText from '@mui/material/ListItemText';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import CloseIcon from '@mui/icons-material/Close';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { useTheme } from '@mui/material/styles';
-
-function Navbar({ data }) {
-    const { site_title, logo, tabs, maxWidth = "lg", minHeight, sx = {}, home_url = "/#home", } = data;
-    const [mobileNavOpen, setMobileNavOpen] = useState(false);
-    const [currentTab, setCurrentTab] = useState(0);
-    const handleOpenMobileMenu = () => {
-        setMobileNavOpen(true);
-    };
-    const handleCloseMobileMenu = () => {
-        setMobileNavOpen(false);
-    };
-    const theme = useTheme();
-    useEffect(() => {
-        const handleScroll = () => {
-            const sections = document.querySelectorAll("section");
-            const scrollPosition = window.scrollY + 1;
-            sections.forEach((section, index) => {
-                if (scrollPosition >= section.offsetTop &&
-                    scrollPosition < section.offsetTop + section.offsetHeight) {
-                    setCurrentTab(index);
-                }
-            });
-        };
-        window.addEventListener("scroll", handleScroll);
-        return () => window.removeEventListener("scroll", handleScroll);
-    }, []);
-    return (jsx(AppBar, { position: "sticky", sx: { backgroundColor: theme.palette.primary.main, ...sx }, children: jsx(Container, { maxWidth: maxWidth, children: jsxs(Toolbar, { disableGutters: true, sx: {
-                    py: 1,
-                    "@media all": {
-                        minHeight: minHeight,
-                    },
-                }, children: [jsx(Link, { href: `/#home`, style: {
-                            color: theme.palette.primary.contrastText,
-                            textDecoration: "none",
-                            cursor: "pointer",
-                        }, children: jsxs(Box, { sx: {
-                                display: { xs: "none", md: "flex" },
-                                alignItems: "center",
-                            }, children: [logo?.url !== undefined && (jsx(Image, { src: logo.url, width: logo.width, height: logo.height, alt: logo.alternativeText || "site logo", style: {
-                                        maxHeight: "55px",
-                                        marginRight: "20px",
-                                        width: "auto",
-                                        height: "auto",
-                                        ...logo.style,
-                                    } })), site_title != null && (jsx(Fragment, { children: typeof site_title === "string" ? (jsx(Typography, { variant: "h6", noWrap: true, component: "h1", sx: {
-                                            display: "flex",
-                                            textDecoration: "none",
-                                        }, children: site_title })) : (jsx(Fragment, { children: site_title })) }))] }) }), jsx(Box, { sx: {
-                            display: { xs: "none", md: "flex" },
-                            width: { xs: "0px", md: "30px" },
-                        } }), tabs && tabs.length > 0 && (jsx(Box, { sx: {
-                            flexGrow: 1,
-                            display: { xs: "none", md: "flex", alignItems: "center" },
-                        }, children: jsx(Tabs, { value: currentTab, "aria-label": "wrapped label tabs example", indicatorColor: "secondary", role: "navigation", children: tabs.length > 0 &&
-                                tabs.map((tab, index) => {
-                                    return (jsx(Link, { href: `/${tab.slug}`, style: {
-                                            color: theme.palette.primary.contrastText,
-                                            textDecoration: "none",
-                                        }, children: jsx(Tab, { value: index, label: tab.name, sx: {
-                                                color: theme.palette.primary.contrastText,
-                                                opacity: 0.9,
-                                            } }) }, tab.name));
-                                }) }) })), jsx(Link, { href: "/", style: {
-                            color: theme.palette.primary.contrastText,
-                            textDecoration: "none",
-                            cursor: "pointer",
-                        }, children: jsxs(Box, { sx: { display: { xs: "flex", md: "none" }, alignItems: "center" }, children: [logo?.url !== undefined && (jsx(Box, { sx: { display: "flex", mr: 1 }, children: jsx("img", { src: logo.url, width: logo.width || 32, height: logo.height || 32, alt: logo.alternativeText || "site logo", style: {
-                                            maxHeight: "55px",
-                                            width: "auto",
-                                            height: "auto",
-                                            ...logo.style,
-                                        } }) })), site_title != null && (jsx(Fragment, { children: typeof site_title === "string" ? (jsx(Typography, { variant: "h5", noWrap: true, component: "h1", sx: {
-                                            display: "flex",
-                                            flexGrow: 1,
-                                            textDecoration: "none",
-                                        }, children: site_title })) : (jsx(Fragment, { children: site_title })) }))] }) }), jsx(Box, { sx: { display: { xs: "flex", md: "none" }, flexGrow: 1 } }), jsxs(Box, { sx: { flexGrow: 0, display: { xs: "flex", md: "none" } }, children: [jsx(Button, { onClick: handleOpenMobileMenu, sx: {
-                                    width: "40px",
-                                    height: "40px",
-                                    borderRadius: "50%",
-                                    p: 0,
-                                    minWidth: "unset",
-                                    color: "primary.contrastText",
-                                    boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                                }, children: jsx(MoreVertIcon, { sx: { color: "primary.contrastText" } }) }), jsxs(Dialog, { fullScreen: true, open: mobileNavOpen, onClose: handleCloseMobileMenu, children: [jsx(AppBar, { position: "sticky", children: jsx(Container, { maxWidth: "xl", children: jsxs(Toolbar, { disableGutters: true, sx: { py: 1, justifyContent: "space-between" }, children: [jsx(Link, { href: "/", style: {
-                                                            color: theme.palette.primary.contrastText,
-                                                            textDecoration: "none",
-                                                            cursor: "pointer",
-                                                        }, children: jsxs(Box, { sx: {
-                                                                display: "flex",
-                                                                flexDirection: "row",
-                                                                alignItems: "center",
-                                                            }, children: [logo?.url && (jsx(Box, { sx: { display: "flex", mr: 1 }, children: jsx("img", { src: logo.url, alt: logo.alternativeText || "logo", width: logo.width || 32, height: logo.height || 32, style: {
-                                                                            maxHeight: "55px",
-                                                                            width: "auto",
-                                                                            height: "auto",
-                                                                        } }) })), site_title != null && (jsx(Fragment, { children: typeof site_title === "string" ? (jsx(Typography, { variant: "h5", noWrap: true, component: "h1", sx: {
-                                                                            display: "flex",
-                                                                            flexGrow: 1,
-                                                                            textDecoration: "none",
-                                                                        }, children: site_title })) : (jsx(Fragment, { children: site_title })) }))] }) }), jsx(Button, { onClick: handleCloseMobileMenu, sx: {
-                                                            width: "40px",
-                                                            height: "40px",
-                                                            borderRadius: "50%",
-                                                            p: 0,
-                                                            minWidth: "unset",
-                                                            color: "primary.contrastText",
-                                                            boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                                                        }, "aria-label": "close", children: jsx(CloseIcon, { sx: { color: "primary.contrastText" } }) })] }) }) }), tabs && tabs.length > 0 && (jsx(List, { children: tabs.map((tab) => {
-                                            return (jsxs(Fragment$1, { children: [jsx(Link, { href: `#${tab.slug}`, style: {
-                                                            color: theme.palette.text.primary,
-                                                            textDecoration: "none",
-                                                            cursor: "pointer",
-                                                        }, children: jsx(Box, { onClick: handleCloseMobileMenu, children: jsx(ListItem, { children: jsx(ListItemText, { primary: tab.name }) }) }) }), jsx(Divider, {})] }, tab.name));
-                                        }) }))] })] })] }) }) }));
-}
-
-export { Navbar as default };

package/dist/esm/src/components/layout/NavbarV2.js

@@ -1,171 +0,0 @@
-"use client";
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment as Fragment$1 } from 'react';
-import Image from 'next/image';
-import Dialog from '@mui/material/Dialog';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import Button from '@mui/material/Button';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import Divider from '@mui/material/Divider';
-import ListItemText from '@mui/material/ListItemText';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import CloseIcon from '@mui/icons-material/Close';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { useTheme } from '@mui/material/styles';
-import { StyledLink } from '../StyledLink.js';
-
-// const currentTab = 0;
-function Navbar({ data }) {
-    const { site_title, logo, navigation, maxWidth = "lg", minHeight, sx = {}, home_url = "/#home", slot1 = null, slot2 = null, } = data;
-    const [mobileNavOpen, setMobileNavOpen] = useState(false);
-    const [currentTab, setCurrentTab] = useState(0);
-    const handleOpenMobileMenu = () => {
-        setMobileNavOpen(true);
-    };
-    const handleCloseMobileMenu = () => {
-        setMobileNavOpen(false);
-    };
-    const theme = useTheme();
-    useEffect(() => {
-        const handleScroll = () => {
-            const sections = document.querySelectorAll("section");
-            const scrollPosition = window.scrollY + 1;
-            sections.forEach((section, index) => {
-                if (scrollPosition >= section.offsetTop &&
-                    scrollPosition < section.offsetTop + section.offsetHeight) {
-                    if (index < navigation.length) {
-                        setCurrentTab(index);
-                    }
-                }
-            });
-        };
-        window.addEventListener("scroll", handleScroll);
-        return () => window.removeEventListener("scroll", handleScroll);
-    }, []);
-    return (jsx(AppBar, { position: "sticky", sx: { backgroundColor: theme.palette.primary.main, ...sx }, children: jsx(Container, { maxWidth: maxWidth, children: jsxs(Toolbar, { disableGutters: true, sx: {
-                    py: 1,
-                    "@media all": {
-                        minHeight: minHeight,
-                    },
-                }, children: [jsx(StyledLink, { href: home_url, sx: {
-                            color: theme.palette.primary.contrastText,
-                            textDecoration: "none",
-                            lineHeight: 0.51,
-                        }, target: "_self", children: jsxs(Box, { sx: {
-                                display: { xs: "none", md: "flex" },
-                                alignItems: "center",
-                            }, children: [logo?.url !== undefined && (jsx(Image, { src: logo.url, width: logo.width || 32, height: logo.height || 32, alt: logo.alternativeText || "site logo", style: {
-                                        maxHeight: "55px",
-                                        marginRight: "20px",
-                                        width: "auto",
-                                        height: "auto",
-                                        ...logo.style,
-                                    } })), site_title != null && (jsx(Fragment, { children: typeof site_title === "string" ? (jsx(Typography, { variant: "h6", noWrap: true, component: "h1", sx: {
-                                            display: "flex",
-                                            textDecoration: "none",
-                                            p: 0,
-                                        }, children: site_title })) : (jsx(Fragment, { children: site_title })) }))] }) }), jsx(Box, { sx: {
-                            display: { xs: "none", md: "flex" },
-                            width: { xs: "0px", md: "30px" },
-                        } }), jsx(Box, { sx: {
-                            flexGrow: 1,
-                            display: { xs: "none", md: "flex", alignItems: "center" },
-                        }, children: jsx(Tabs, { value: currentTab, "aria-label": "main website navigation", indicatorColor: "secondary", role: "navigation", children: navigation.length > 0 &&
-                                navigation.map((page, index) => {
-                                    return (jsx(Tab, { value: page.tab, label: jsxs(Fragment, { children: [jsx(StyledLink, { href: page.path, sx: { color: theme.palette.primary.contrastText }, target: "_self", children: page.title }), page.subItems &&
-                                                    page.subItems.length > 0 &&
-                                                    page.subItems.map((child, index) => {
-                                                        const offsetTop = 50 + 50 * index;
-                                                        return (jsx(Box, { sx: { position: "fixed" }, children: jsx(Box, { sx: {
-                                                                    position: "absolute",
-                                                                    top: offsetTop,
-                                                                    // transform: "translateX(50%)",
-                                                                }, children: jsx(StyledLink, { href: child.path, target: "_self", children: jsx(Typography, { className: "nested", variant: "button", textAlign: "center", sx: {
-                                                                            display: "block",
-                                                                            position: "absolute",
-                                                                            top: "-1000px",
-                                                                            transform: "translateX(-50%)",
-                                                                            color: theme.palette.primary.contrastText,
-                                                                            transitionDuration: "0.5s",
-                                                                            transitionDelay: "0.5s",
-                                                                            width: "max-content",
-                                                                            "&:hover": {
-                                                                                borderBottom: "1px solid red",
-                                                                            },
-                                                                        }, children: child.title }) }) }, `${child.documentId}-inner`) }, child.documentId));
-                                                    })] }), sx: {
-                                            color: theme.palette.primary.contrastText,
-                                            opacity: 0.9,
-                                            position: "relative",
-                                            overflow: "visible",
-                                            display: "flex",
-                                            flexDirection: "column",
-                                            "& .nested": { p: 0 },
-                                            "&:hover": {
-                                                ".nested": {
-                                                    top: "0px",
-                                                },
-                                            },
-                                        } }, page.documentId));
-                                }) }) }), jsx(StyledLink, { href: "/", sx: {
-                            color: theme.palette.primary.contrastText,
-                            textDecoration: "none",
-                        }, target: "_self", children: jsxs(Box, { sx: { display: { xs: "flex", md: "none" }, alignItems: "center" }, children: [logo?.url !== undefined && (jsx(Box, { sx: { display: "flex", mr: 1 }, children: jsx("img", { src: logo.url, width: logo.width || 32, height: logo.height || 32, alt: logo.alternativeText || "site logo", style: {
-                                            maxHeight: "55px",
-                                            width: "auto",
-                                            height: "auto",
-                                            ...logo.style,
-                                        } }) })), site_title != null && (jsx(Fragment, { children: typeof site_title === "string" ? (jsx(Typography, { variant: "h5", noWrap: true, component: "h1", sx: {
-                                            display: "flex",
-                                            flexGrow: 1,
-                                            textDecoration: "none",
-                                        }, children: site_title })) : (jsx(Fragment, { children: site_title })) }))] }) }), jsx(Box, { sx: { display: { xs: "flex" }, flexGrow: 1 } }), slot1 && (jsx(Box, { sx: { display: { xs: "none", md: "flex" }, mr: 2 }, children: slot1 })), slot2 && (jsx(Box, { sx: { display: { xs: "none", md: "flex" }, mr: 2 }, children: slot2 })), jsxs(Box, { sx: { flexGrow: 0, display: { xs: "flex", md: "none" } }, children: [jsx(Button, { onClick: handleOpenMobileMenu, sx: {
-                                    width: "40px",
-                                    height: "40px",
-                                    borderRadius: "50%",
-                                    p: 0,
-                                    minWidth: "unset",
-                                    color: "primary.contrastText",
-                                    boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                                }, children: jsx(MoreVertIcon, { sx: { color: "primary.contrastText" } }) }), jsxs(Dialog, { fullScreen: true, open: mobileNavOpen, onClose: handleCloseMobileMenu, children: [jsx(AppBar, { position: "sticky", children: jsx(Container, { maxWidth: "xl", children: jsxs(Toolbar, { disableGutters: true, sx: { py: 1, justifyContent: "space-between" }, children: [jsx(StyledLink, { href: "/", sx: {
-                                                            color: theme.palette.primary.contrastText,
-                                                        }, target: "_self", children: jsxs(Box, { sx: {
-                                                                display: "flex",
-                                                                flexDirection: "row",
-                                                                alignItems: "center",
-                                                            }, children: [logo?.url && (jsx(Box, { sx: { display: "flex", mr: 1 }, children: jsx("img", { src: logo.url, alt: logo.alternativeText || "logo", width: logo.width || 32, height: logo.height || 32, style: {
-                                                                            maxHeight: "55px",
-                                                                            width: "auto",
-                                                                            height: "auto",
-                                                                        } }) })), site_title != null && (jsx(Fragment, { children: typeof site_title === "string" ? (jsx(Typography, { variant: "h5", noWrap: true, component: "h1", sx: {
-                                                                            display: "flex",
-                                                                            flexGrow: 1,
-                                                                            textDecoration: "none",
-                                                                        }, children: site_title })) : (jsx(Fragment, { children: site_title })) }))] }) }), jsx(Button, { onClick: handleCloseMobileMenu, sx: {
-                                                            width: "40px",
-                                                            height: "40px",
-                                                            borderRadius: "50%",
-                                                            p: 0,
-                                                            minWidth: "unset",
-                                                            color: "primary.contrastText",
-                                                            boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                                                        }, "aria-label": "close", children: jsx(CloseIcon, { sx: { color: "primary.contrastText" } }) })] }) }) }), jsxs(List, { children: [navigation.length > 0 && (jsx(Fragment, { children: navigation.map((page) => {
-                                                    return (jsxs(Fragment$1, { children: [jsx(StyledLink, { href: page.path, target: "_self", children: jsx(ListItem, { children: jsx(ListItemText, { primary: page.title }) }) }), jsx(Divider, {}), page.subItems && page.subItems.length > 0 && (jsx(List, { children: page.subItems.map((child) => {
-                                                                    return (jsxs(Fragment$1, { children: [jsx(StyledLink, { href: child.path, target: "_self", children: jsx(ListItem, { children: jsx(ListItemText, { primary: child.title }) }) }), jsx(Divider, {})] }, child.documentId));
-                                                                }) }))] }, page.documentId));
-                                                }) })), slot1 && (jsxs(Fragment, { children: [jsx(ListItem, { children: slot1 }), jsx(Divider, {})] })), slot2 && (jsxs(Fragment, { children: [jsx(ListItem, { children: slot2 }), jsx(Divider, {})] }))] })] })] })] }) }) }));
-}
-
-export { Navbar as default };

package/dist/esm/src/components/layout/SideNav.js

@@ -1,154 +0,0 @@
-"use client";
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
-import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-import Typography from '@mui/material/Typography';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import SpeedDial from '@mui/material/SpeedDial';
-import SpeedDialAction from '@mui/material/SpeedDialAction';
-import Drawer from '@mui/material/Drawer';
-import AppBar from '@mui/material/AppBar';
-import MenuIcon from '@mui/icons-material/Menu';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-import { useTheme } from '@mui/material/styles';
-import { StyledLink } from '../StyledLink.js';
-import { Paper } from '@mui/material';
-
-function SideNav({ children, data, }) {
-    const { sections = [], actions = [], sx = {}, title, drawerWidth = 260, } = data;
-    const theme = useTheme();
-    const AppbarSxOpen = {
-        zIndex: theme.zIndex.drawer + 1,
-        marginLeft: drawerWidth,
-        width: `calc(100% - ${drawerWidth}px)`,
-        /* transition: theme.transitions.create(["width", "margin"], {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.enteringScreen,
-        }), */
-    };
-    const AppbarSxClosed = {
-        zIndex: theme.zIndex.drawer + 1,
-        transition: theme.transitions.create(["width", "margin"], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-        }),
-    };
-    const drawerSxOpen = {
-        width: drawerWidth,
-        flexShrink: 0,
-        whiteSpace: "nowrap",
-        boxSizing: "border-box",
-        transition: theme.transitions.create("width", {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-        overflowX: "hidden",
-        "& .MuiDrawer-paper": {
-            width: drawerWidth,
-            transition: theme.transitions.create("width", {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.enteringScreen,
-            }),
-            overflowX: "hidden",
-        },
-    };
-    const drawerSxClosed = {
-        flexShrink: 0,
-        whiteSpace: "nowrap",
-        boxSizing: "border-box",
-        transition: theme.transitions.create("width", {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-        }),
-        overflowX: "hidden",
-        width: `calc(${theme.spacing(7)} + 1px)`,
-        [theme.breakpoints.up("sm")]: {
-            width: `calc(${theme.spacing(8)} + 1px)`,
-        },
-        "& .MuiDrawer-paper": {
-            transition: theme.transitions.create("width", {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.leavingScreen,
-            }),
-            overflowX: "hidden",
-            width: `calc(${theme.spacing(7)} + 1px)`,
-            [theme.breakpoints.up("sm")]: {
-                width: `calc(${theme.spacing(8)} + 1px)`,
-            },
-        },
-    };
-    const [open, setOpen] = React.useState(true);
-    const handleDrawerOpen = () => {
-        setOpen(true);
-    };
-    const handleDrawerClose = () => {
-        setOpen(false);
-    };
-    return (jsxs(Box, { sx: { display: "flex", ...sx }, children: [jsx(AppBar, { position: "fixed", sx: [open && AppbarSxOpen, !open && AppbarSxClosed], children: jsxs(Toolbar, { component: Paper, elevation: 4, children: [jsx(IconButton, { color: "inherit", "aria-label": "open drawer", onClick: handleDrawerOpen, edge: "start", sx: {
-                                marginRight: 5,
-                                ...(open && { display: "none" }),
-                            }, children: jsx(MenuIcon, {}) }), jsx(StyledLink, { href: "/dashboard", target: "_self", children: title ?? "Dashboard" }), jsx(Box, { sx: {
-                                position: "relative",
-                                height: "40px",
-                                flexGrow: 1,
-                            }, children: jsx(SpeedDial, { ariaLabel: "...", icon: jsx(AccountCircleIcon, {}), direction: "down", sx: {
-                                    position: "absolute",
-                                    top: 0,
-                                    right: 0,
-                                    width: 40,
-                                    "& .MuiFab-root": { width: 40, height: 40 },
-                                }, children: actions.map((action, index) => (jsx(SpeedDialAction, { icon: action.icon, "aria-label": action.name, tooltipTitle: action.name, 
-                                    /* a very precious hint from somebody on github:
-                                      here what's happening is that when you do onClick={mutateUserUniverserData}, you are doing this,
-                                      onClick={(event) => mutateUserUniverserData(event)}, and you kind of want to ignore the event,
-                                      because it is not serializable according Server Actions. */
-                                    onClick: () => {
-                                        action.action();
-                                    } }, index))) }) })] }) }), jsxs(Drawer, { variant: "permanent", open: open, sx: [open && drawerSxOpen, !open && drawerSxClosed], children: [jsx(Box, { sx: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "flex-end",
-                            padding: theme.spacing(0, 1),
-                            // necessary for content to be below app bar
-                            ...theme.mixins.toolbar,
-                        }, children: jsx(IconButton, { onClick: handleDrawerClose, children: theme.direction === "rtl" ? (jsx(ChevronRightIcon, {})) : (jsx(ChevronLeftIcon, {})) }) }), jsx(Divider, {}), sections.map((section, index) => (jsxs(Box, { sx: {
-                            display: "flex",
-                            flexDirection: "column",
-                            alignItems: "flex-start",
-                        }, children: [jsx(StyledLink, { href: section.link, target: "_self", children: jsxs(Box, { sx: {
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        p: 1,
-                                        cursor: "pointer",
-                                    }, children: [section.icon, !open && section.subSections && jsx(Typography, { children: "..." }), open && (jsx(Typography, { sx: { pl: 2 }, children: section.title }))] }) }), section.subSections &&
-                                open &&
-                                section.subSections.map((subSection, index) => {
-                                    return (jsx(StyledLink, { href: subSection.link, target: "_self", children: jsx(Box, { sx: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                justifyContent: "center",
-                                                p: 1,
-                                                cursor: "pointer",
-                                            }, children: jsx(Typography, { variant: "body2", sx: { pl: 4 }, children: subSection.title }) }) }, index));
-                                })] }, index)))] }), jsxs(Box, { component: "main", sx: { flexGrow: 1, minHeight: "100vh" }, children: [jsx(Box, { sx: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "flex-end",
-                            // padding: theme.spacing(0, 1),
-                            // necessary for content to be below app bar
-                            ...theme.mixins.toolbar,
-                        } }), children] })] }));
-}
-
-export { SideNav as default };