umwd-components 0.1.715 → 0.1.717

package/dist/esm/src/components/e-commerce/products/ProductCard.js

@@ -0,0 +1,50 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import Price from './Price.js';
+import { getStrapiMedia } from '../../../lib/utils.js';
+import { StyledLink } from '../../StyledLink.js';
+import AddToCartButton from '../cart/AddToCartButton.client.js';
+import MarkdownDisplay from '../../common/markdown/MarkdownDisplay.js';
+
+function ProductCard({ product, sx = [] }) {
+    const { id, uuid, product_number, title, description, slug, price, image, stock, } = product;
+    const imgURL = getStrapiMedia(image?.url);
+    const thumbURL = getStrapiMedia(image?.formats?.thumbnail?.url);
+    return (jsxs(Card, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { width: "100%", height: "100%" },
+            { display: "flex", flexDirection: "column" },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: [jsx(CardMedia, { component: "img", height: "140", src: `${imgURL}`, alt: image.alternativeText }), jsxs(CardContent, { children: [jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: 2 }, children: [jsx(StyledLink, { href: `/shop/${slug}`, target: "_self", children: jsx(Typography, { variant: "h5", children: title }) }), jsx(Price, { id: id, price: price.price, vat: price.vat, vat_rate: price.vat_rate, price_incl_vat: price.price_incl_vat })] }), description && (jsx(MarkdownDisplay, { children: description.substring(0, 150) + "..." }))] }), jsx(Box, { sx: { flexGrow: 1 } }), jsxs(CardActions, { sx: {
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    alignItems: "flex-end",
+                }, children: [jsx(Button, { size: "small", href: `/shop/${slug}`, children: "Learn More" }), jsx(AddToCartButton, { product: {
+                            id: id,
+                            uuid: uuid,
+                            slug: slug,
+                            thumb: thumbURL,
+                            title: title,
+                            vat_rate: price.vat_rate,
+                            price_excl_vat: price.price,
+                            price_incl_vat: price.price_incl_vat,
+                            quantity: 1,
+                            product_number: product_number,
+                            stock: stock,
+                        } })] })] }));
+}
+
+export { ProductCard as default };

package/dist/esm/src/components/e-commerce/products/ProductCategoryCard.js

@@ -0,0 +1,32 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import ProductCard from './ProductCard.js';
+import MarkdownDisplay from '../../common/markdown/MarkdownDisplay.js';
+
+function ProductCategoryCard({ category, sx = [] }) {
+    const { title, description, slug, products } = category;
+    const PRODUCTS_PER_CATEGORY = 3;
+    return (jsx(Card, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            { width: "100%", height: "100%", pt: 2, pl: 2, pb: 2, mb: 2 },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: jsxs(Grid, { container: true, xs: 12, spacing: 2, children: [jsxs(Grid, { item: true, xs: 12, sm: 6, md: 3, sx: {
+                        display: "flex",
+                        justifyContent: "start",
+                        alignItems: "center",
+                        gap: 2,
+                        flexDirection: "column",
+                    }, children: [jsx(Typography, { variant: "h4", component: "h1", align: "center", children: title }), description && (jsx(Box, { sx: { textAlign: "center", p: 2, overflow: "hidden" }, children: jsx(MarkdownDisplay, { children: description }) })), jsxs(Button, { variant: "contained", color: "primary", href: `/shop/categories/${slug}`, children: ["See all ", category.title] }), products.data.length - PRODUCTS_PER_CATEGORY > 0 && (jsxs(Typography, { variant: "body2", children: [products.data.length - PRODUCTS_PER_CATEGORY, " more..."] }))] }), products.data.slice(0, PRODUCTS_PER_CATEGORY).map((product) => (jsx(Grid, { item: true, xs: 12, sm: 6, md: 3, children: jsx(ProductCard, { product: product }, product.id) })))] }) }));
+}
+
+export { ProductCategoryCard as default };

package/dist/esm/src/components/e-commerce/products/ProductSelector.js

@@ -0,0 +1,43 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+
+const ProductSelector = ({ productNames, currentValue, sx, multiple = true, onChangeCallback, }) => {
+    const [selectedValues, setSelectedValues] = useState(currentValue || []);
+    const handleProductChange = (event, value) => {
+        if (multiple === true) {
+            const ids = value.map((product) => product.id);
+            setSelectedValues(ids);
+            if (onChangeCallback)
+                onChangeCallback(ids);
+        }
+        else if (value) {
+            setSelectedValues([value.id]);
+            if (onChangeCallback)
+                onChangeCallback([value.id]);
+        }
+        else {
+            setSelectedValues([]);
+            if (onChangeCallback)
+                onChangeCallback([]);
+        }
+    };
+    return (jsxs(Box, { sx: [
+            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], children: [jsx(Autocomplete, { multiple: multiple, options: productNames, getOptionLabel: (option) => {
+                    return `${option.product_number} | ${option.title}`;
+                }, filterSelectedOptions: true, onChange: handleProductChange, renderInput: (params) => jsx(TextField, { ...params, label: "Products" }), defaultValue: multiple
+                    ? productNames.filter((productName) => selectedValues.includes(productName.id))
+                    : productNames.find((productName) => productName.id === selectedValues[0]) || null }), jsx("input", { type: "hidden", name: "products", value: JSON.stringify(selectedValues) })] }));
+};
+
+export { ProductSelector as default };

package/dist/esm/src/components/e-commerce/products/SingleProduct.js

@@ -0,0 +1,55 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Suspense } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import { getStrapiMedia } from '../../../lib/utils.js';
+import Link from 'next/link';
+import { StrapiImage } from '../../StrapiImage.js';
+import AddToCartButton from '../cart/AddToCartButton.client.js';
+import MarkdownDisplay from '../../common/markdown/MarkdownDisplay.js';
+
+function SingleProduct({ product, sx = [] }) {
+    const { id, uuid, product_number, title, description, slug, price, image, gallery, categories, stock, } = product;
+    const imgURL = image?.url ? getStrapiMedia(image.url) : null;
+    const thumbURL = image?.formats?.thumbnail?.url
+        ? getStrapiMedia(image.formats.thumbnail.url)
+        : null;
+    return (jsx(Fragment, { children: jsxs(Grid, { container: true, spacing: 2, sx: { py: 3, minHeight: "60vh" }, children: [jsx(Grid, { item: true, xs: 12, sm: 12, md: 12, lg: 12, xl: 12, children: jsx(Typography, { variant: "h4", align: "left", component: "h1", children: title }) }), jsx(Grid, { item: true, xs: 12, sm: 8, md: 9, lg: 4, xl: 4, children: jsx(MarkdownDisplay, { children: description }) }), jsx(Grid, { item: true, xs: 12, sm: 4, md: 3, lg: 3, xl: 3, children: price?.price && (jsx(Paper, { sx: { p: 1 }, children: jsxs(Stack, { spacing: 1, children: [jsxs(Typography, { variant: "body2", children: ["Price excl. VAT \u20AC ", price.price.toFixed(2)] }), price.price_incl_vat && (jsxs(Typography, { variant: "body2", sx: { fontWeight: 600 }, children: ["Price incl. VAT \u20AC ", price.price_incl_vat.toFixed(2)] })), jsxs(Typography, { variant: "body2", sx: {
+                                        fontWeight: 600,
+                                        color: stock === 0 ? "red" : "white",
+                                    }, align: "right", children: [stock, " items in stock"] }), jsx(AddToCartButton, { product: {
+                                        id: id,
+                                        uuid: uuid,
+                                        slug: slug,
+                                        thumb: thumbURL,
+                                        title: title,
+                                        vat_rate: price.vat_rate,
+                                        quantity: 1,
+                                        price_excl_vat: price.price,
+                                        price_incl_vat: price.price_incl_vat,
+                                        product_number: product_number,
+                                        stock: stock,
+                                    } })] }) })) }), jsx(Grid, { item: true, xs: 12, sm: 12, md: 6, lg: 5, xl: 5, children: imgURL !== null && (jsx(Box, { sx: { height: "400px", width: "100%", position: "relative" }, children: jsx(Suspense, { fallback: jsx("div", { children: "Loading..." }), children: jsx(StrapiImage, { id: image.id, url: imgURL, alternativeText: image.alternativeText, fill: true, style: { objectFit: "contain" } }) }) })) }), jsx(Grid, { item: true, xs: 12, sm: 12, md: 6, lg: 7, xl: 7, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h6", children: "Image gallery" }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Suspense, { fallback: jsx("div", { children: "Loading..." }), children: jsx(Stack, { spacing: 1, direction: "row", children: product?.gallery?.data &&
+                                            product.gallery.data.map((img) => {
+                                                const imgUrl = img?.url ? getStrapiMedia(img.url) : null;
+                                                return (jsx(Box, { sx: {
+                                                        width: " 150px",
+                                                        height: "150px",
+                                                        position: "relative",
+                                                    }, children: imgUrl !== null && (jsx(StrapiImage, { id: img.id, url: imgUrl, alternativeText: img.alternativeText, fill: true, style: { objectFit: "contain" } })) }, img.id));
+                                            }) }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: categories?.data && (jsxs(Stack, { justifyContent: "center", alignItems: "center", direction: categories.data.length === 1 ? "row" : "column", children: [categories.data.length === 1 ? (jsx(Typography, { children: "Category:" })) : (jsx(Typography, { children: "Categories:" })), categories.data?.map((categorie) => {
+                                            return (jsx(Link, { href: `/shop/categories/${categorie.slug}`, legacyBehavior: true, children: jsx(Button, { variant: "text", children: categorie.slug }) }, categorie.id));
+                                        })] })) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(Stack, { children: jsx(Link, { href: "/shop", legacyBehavior: true, children: jsx(Button, { variant: "outlined", children: "continue shopping" }) }) }) })] }) })] }) }));
+}
+
+export { SingleProduct as default };

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

@@ -0,0 +1,101 @@
+"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, { item: true, xs: 12, sm: 6, md: 4, sx: [
+                                useIcons && {
+                                    display: "grid",
+                                    justifyContent: "center",
+                                },
+                            ], 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, { item: true, xs: 12, sm: 6, md: 4, sx: [
+                                useIcons && {
+                                    display: "grid",
+                                    justifyContent: "stretch",
+                                    width: { xs: "80%", sm: "60%", md: "80%" },
+                                },
+                            ], 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, { item: true, xs: 12, sm: 6, md: 4, sx: [
+                                useIcons && {
+                                    display: "grid",
+                                    justifyContent: "center",
+                                },
+                            ], 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, { item: true, xs: 12, children: jsx(Divider, {}) }), jsx(Grid, { item: true, xs: 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, { item: true, xs: 12, sm: 4, sx: {
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                            }, children: jsx(CookieConsentButtonSmall, {}) }), Boolean(disclaimer_link || privacypolicy_link) && (jsx(Grid, { item: true, xs: 12, children: jsx(Divider, {}) })), jsx(Grid, { item: true, xs: 12, sx: {
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                pb: "50px",
+                            }, 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

@@ -0,0 +1,144 @@
+"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

@@ -0,0 +1,169 @@
+"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) {
+                    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) => {
+                                    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.id));
+                                                    })] }), 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.id));
+                                }) }) }), 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.id));
+                                                                }) }))] }, page.id));
+                                                }) })), slot1 && (jsxs(Fragment, { children: [jsx(ListItem, { children: slot1 }), jsx(Divider, {})] })), slot2 && (jsxs(Fragment, { children: [jsx(ListItem, { children: slot2 }), jsx(Divider, {})] }))] })] })] })] }) }) }));
+}
+
+export { Navbar as default };