umwd-components 0.1.184 → 0.1.185

package/dist/cjs/components/Footer.js

@@ -42,7 +42,8 @@ Footer.propTypes = {
     icon: PropTypes.elementType
   })),
   disclaimer_link: PropTypes.string,
-  privacypolicy_link: PropTypes.string
+  privacypolicy_link: PropTypes.string,
+  referal: PropTypes.element
 };
 function Footer(_ref) {
   let {
@@ -56,7 +57,8 @@ function Footer(_ref) {
     company_socials,
     disclaimer_link,
     privacypolicy_link,
-    maxWidth = "lg"
+    maxWidth = "lg",
+    referal
   } = _ref;
   const theme = material.useTheme();
   const APIcon = getIcon.default("APIcon");
@@ -214,7 +216,7 @@ function Footer(_ref) {
       alignItems: "center",
       pb: "50px"
     }
-  }, /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
+  }, referal ? referal : /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
     href: "https://atelierpaulus.nl/"
   }, /*#__PURE__*/React.createElement(material.Typography, {
     color: "secondary.contrastText",

package/dist/cjs/components/ScrollNavbar.js

@@ -40,6 +40,19 @@ function ScrollNavbar(_ref) {
     setMobileNavOpen(false);
   };
   const theme = material.useTheme();
+  React.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 /*#__PURE__*/React.createElement(material.AppBar, {
     position: "sticky",
     sx: {

package/dist/esm/components/Footer.js

@@ -38,7 +38,8 @@ Footer.propTypes = {
     icon: PropTypes.elementType
   })),
   disclaimer_link: PropTypes.string,
-  privacypolicy_link: PropTypes.string
+  privacypolicy_link: PropTypes.string,
+  referal: PropTypes.element
 };
 function Footer(_ref) {
   let {
@@ -52,7 +53,8 @@ function Footer(_ref) {
     company_socials,
     disclaimer_link,
     privacypolicy_link,
-    maxWidth = "lg"
+    maxWidth = "lg",
+    referal
   } = _ref;
   const theme = useTheme();
   const APIcon = getIcon("APIcon");
@@ -210,7 +212,7 @@ function Footer(_ref) {
       alignItems: "center",
       pb: "50px"
     }
-  }, /*#__PURE__*/React__default.createElement(MuiLink, {
+  }, referal ? referal : /*#__PURE__*/React__default.createElement(MuiLink, {
     href: "https://atelierpaulus.nl/"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     color: "secondary.contrastText",

package/dist/esm/components/ScrollNavbar.js

@@ -5,7 +5,7 @@
  * @license MIT
  */
   
-import React__default, { useState, Fragment } from 'react';
+import React__default, { useState, useEffect, Fragment } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useTheme, AppBar, Container, Toolbar, Box, Typography, Button, Tabs, Tab, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
@@ -36,6 +36,19 @@ function ScrollNavbar(_ref) {
     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 /*#__PURE__*/React__default.createElement(AppBar, {
     position: "sticky",
     sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.184",
+  "version": "0.1.185",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Footer.js

@@ -51,6 +51,7 @@ Footer.propTypes = {
   ),
   disclaimer_link: PropTypes.string,
   privacypolicy_link: PropTypes.string,
+  referal: PropTypes.element,
 };
 
 function Footer({
@@ -65,6 +66,7 @@ function Footer({
   disclaimer_link,
   privacypolicy_link,
   maxWidth = "lg",
+  referal,
 }) {
   const theme = useTheme();
 
@@ -244,24 +246,28 @@ function Footer({
                 pb: "50px",
               }}
             >
-              <MuiLink href="https://atelierpaulus.nl/">
-                <Typography
-                  color="secondary.contrastText"
-                  sx={{
-                    textDecoration: "underline",
-                    verticalAlign: "middle",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexDirection: { xs: "column", sm: "row" },
-                    gap: 2,
-                  }}
-                >
-                  Design & Webdevelopment
-                  {APIcon !== null && <APIcon sx={{ mx: 2 }} />}
-                  Atelier Paulus
-                </Typography>
-              </MuiLink>
+              {referal ? (
+                referal
+              ) : (
+                <MuiLink href="https://atelierpaulus.nl/">
+                  <Typography
+                    color="secondary.contrastText"
+                    sx={{
+                      textDecoration: "underline",
+                      verticalAlign: "middle",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexDirection: { xs: "column", sm: "row" },
+                      gap: 2,
+                    }}
+                  >
+                    Design & Webdevelopment
+                    {APIcon !== null && <APIcon sx={{ mx: 2 }} />}
+                    Atelier Paulus
+                  </Typography>
+                </MuiLink>
+              )}
             </Grid>
           </Grid>
         </Toolbar>

package/src/components/ScrollNavbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { Fragment, useState } from "react";
+import React, { Fragment, useState, useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import {
@@ -74,6 +74,25 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
 
   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 (
     <AppBar
       position="sticky"

package/src/stories/ScrollNavbar.stories.js

@@ -62,22 +62,22 @@ AMH.args = {
     tabs: [
       {
         name: "Home",
-        link: "/home",
+        link: "/#home",
         slug: "home",
       },
       {
         name: "Services",
-        link: "/services",
+        link: "/#services",
         slug: "services",
       },
       {
         name: "About Us",
-        link: "/about-us",
+        link: "/#about-us",
         slug: "about-us",
       },
       {
         name: "Contact",
-        link: "/contact",
+        link: "/#contact",
         slug: "contact",
       },
     ],