umwd-components 0.1.183 → 0.1.185
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Footer.js +8 -6
- package/dist/cjs/components/ScrollNavbar.js +13 -0
- package/dist/esm/components/Footer.js +8 -6
- package/dist/esm/components/ScrollNavbar.js +14 -1
- package/package.json +1 -1
- package/src/components/Footer.js +44 -37
- package/src/components/ScrollNavbar.tsx +20 -1
- package/src/stories/ScrollNavbar.stories.js +4 -4
|
@@ -42,7 +42,8 @@ Footer.propTypes = {
|
|
|
42
42
|
icon: PropTypes.elementType
|
|
43
43
|
})),
|
|
44
44
|
disclaimer_link: PropTypes.string,
|
|
45
|
-
privacypolicy_link: PropTypes.string
|
|
45
|
+
privacypolicy_link: PropTypes.string,
|
|
46
|
+
referal: PropTypes.element
|
|
46
47
|
};
|
|
47
48
|
function Footer(_ref) {
|
|
48
49
|
let {
|
|
@@ -56,7 +57,8 @@ function Footer(_ref) {
|
|
|
56
57
|
company_socials,
|
|
57
58
|
disclaimer_link,
|
|
58
59
|
privacypolicy_link,
|
|
59
|
-
maxWidth = "lg"
|
|
60
|
+
maxWidth = "lg",
|
|
61
|
+
referal
|
|
60
62
|
} = _ref;
|
|
61
63
|
const theme = material.useTheme();
|
|
62
64
|
const APIcon = getIcon.default("APIcon");
|
|
@@ -81,8 +83,6 @@ function Footer(_ref) {
|
|
|
81
83
|
sm: 12,
|
|
82
84
|
md: 4,
|
|
83
85
|
align: "center"
|
|
84
|
-
}, /*#__PURE__*/React.createElement(Link, {
|
|
85
|
-
href: "#home"
|
|
86
86
|
}, /*#__PURE__*/React.createElement(material.Box, {
|
|
87
87
|
sx: {
|
|
88
88
|
display: {
|
|
@@ -102,7 +102,9 @@ function Footer(_ref) {
|
|
|
102
102
|
sx: {
|
|
103
103
|
mb: 2
|
|
104
104
|
}
|
|
105
|
-
}, site_title), logo && /*#__PURE__*/React.createElement(
|
|
105
|
+
}, site_title), logo && /*#__PURE__*/React.createElement(Link, {
|
|
106
|
+
href: "#home"
|
|
107
|
+
}, /*#__PURE__*/React.createElement(material.Box, {
|
|
106
108
|
sx: {
|
|
107
109
|
display: "flex",
|
|
108
110
|
alignItems: "center",
|
|
@@ -214,7 +216,7 @@ function Footer(_ref) {
|
|
|
214
216
|
alignItems: "center",
|
|
215
217
|
pb: "50px"
|
|
216
218
|
}
|
|
217
|
-
}, /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
|
|
219
|
+
}, referal ? referal : /*#__PURE__*/React.createElement(MuiLink.MuiLink, {
|
|
218
220
|
href: "https://atelierpaulus.nl/"
|
|
219
221
|
}, /*#__PURE__*/React.createElement(material.Typography, {
|
|
220
222
|
color: "secondary.contrastText",
|
|
@@ -40,6 +40,19 @@ function ScrollNavbar(_ref) {
|
|
|
40
40
|
setMobileNavOpen(false);
|
|
41
41
|
};
|
|
42
42
|
const theme = material.useTheme();
|
|
43
|
+
React.useEffect(() => {
|
|
44
|
+
const handleScroll = () => {
|
|
45
|
+
const sections = document.querySelectorAll("section");
|
|
46
|
+
const scrollPosition = window.scrollY + 1;
|
|
47
|
+
sections.forEach((section, index) => {
|
|
48
|
+
if (scrollPosition >= section.offsetTop && scrollPosition < section.offsetTop + section.offsetHeight) {
|
|
49
|
+
setCurrentTab(index);
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
window.addEventListener("scroll", handleScroll);
|
|
54
|
+
return () => window.removeEventListener("scroll", handleScroll);
|
|
55
|
+
}, []);
|
|
43
56
|
return /*#__PURE__*/React.createElement(material.AppBar, {
|
|
44
57
|
position: "sticky",
|
|
45
58
|
sx: {
|
|
@@ -38,7 +38,8 @@ Footer.propTypes = {
|
|
|
38
38
|
icon: PropTypes.elementType
|
|
39
39
|
})),
|
|
40
40
|
disclaimer_link: PropTypes.string,
|
|
41
|
-
privacypolicy_link: PropTypes.string
|
|
41
|
+
privacypolicy_link: PropTypes.string,
|
|
42
|
+
referal: PropTypes.element
|
|
42
43
|
};
|
|
43
44
|
function Footer(_ref) {
|
|
44
45
|
let {
|
|
@@ -52,7 +53,8 @@ function Footer(_ref) {
|
|
|
52
53
|
company_socials,
|
|
53
54
|
disclaimer_link,
|
|
54
55
|
privacypolicy_link,
|
|
55
|
-
maxWidth = "lg"
|
|
56
|
+
maxWidth = "lg",
|
|
57
|
+
referal
|
|
56
58
|
} = _ref;
|
|
57
59
|
const theme = useTheme();
|
|
58
60
|
const APIcon = getIcon("APIcon");
|
|
@@ -77,8 +79,6 @@ function Footer(_ref) {
|
|
|
77
79
|
sm: 12,
|
|
78
80
|
md: 4,
|
|
79
81
|
align: "center"
|
|
80
|
-
}, /*#__PURE__*/React__default.createElement(Link, {
|
|
81
|
-
href: "#home"
|
|
82
82
|
}, /*#__PURE__*/React__default.createElement(Box, {
|
|
83
83
|
sx: {
|
|
84
84
|
display: {
|
|
@@ -98,7 +98,9 @@ function Footer(_ref) {
|
|
|
98
98
|
sx: {
|
|
99
99
|
mb: 2
|
|
100
100
|
}
|
|
101
|
-
}, site_title), logo && /*#__PURE__*/React__default.createElement(
|
|
101
|
+
}, site_title), logo && /*#__PURE__*/React__default.createElement(Link, {
|
|
102
|
+
href: "#home"
|
|
103
|
+
}, /*#__PURE__*/React__default.createElement(Box, {
|
|
102
104
|
sx: {
|
|
103
105
|
display: "flex",
|
|
104
106
|
alignItems: "center",
|
|
@@ -210,7 +212,7 @@ function Footer(_ref) {
|
|
|
210
212
|
alignItems: "center",
|
|
211
213
|
pb: "50px"
|
|
212
214
|
}
|
|
213
|
-
}, /*#__PURE__*/React__default.createElement(MuiLink, {
|
|
215
|
+
}, referal ? referal : /*#__PURE__*/React__default.createElement(MuiLink, {
|
|
214
216
|
href: "https://atelierpaulus.nl/"
|
|
215
217
|
}, /*#__PURE__*/React__default.createElement(Typography, {
|
|
216
218
|
color: "secondary.contrastText",
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* @license MIT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import React__default, { useState, Fragment } from 'react';
|
|
8
|
+
import React__default, { useState, useEffect, Fragment } from 'react';
|
|
9
9
|
import Link from 'next/link';
|
|
10
10
|
import Image from 'next/image';
|
|
11
11
|
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) {
|
|
|
36
36
|
setMobileNavOpen(false);
|
|
37
37
|
};
|
|
38
38
|
const theme = useTheme();
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
const handleScroll = () => {
|
|
41
|
+
const sections = document.querySelectorAll("section");
|
|
42
|
+
const scrollPosition = window.scrollY + 1;
|
|
43
|
+
sections.forEach((section, index) => {
|
|
44
|
+
if (scrollPosition >= section.offsetTop && scrollPosition < section.offsetTop + section.offsetHeight) {
|
|
45
|
+
setCurrentTab(index);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
window.addEventListener("scroll", handleScroll);
|
|
50
|
+
return () => window.removeEventListener("scroll", handleScroll);
|
|
51
|
+
}, []);
|
|
39
52
|
return /*#__PURE__*/React__default.createElement(AppBar, {
|
|
40
53
|
position: "sticky",
|
|
41
54
|
sx: {
|
package/package.json
CHANGED
package/src/components/Footer.js
CHANGED
|
@@ -51,6 +51,7 @@ Footer.propTypes = {
|
|
|
51
51
|
),
|
|
52
52
|
disclaimer_link: PropTypes.string,
|
|
53
53
|
privacypolicy_link: PropTypes.string,
|
|
54
|
+
referal: PropTypes.element,
|
|
54
55
|
};
|
|
55
56
|
|
|
56
57
|
function Footer({
|
|
@@ -65,6 +66,7 @@ function Footer({
|
|
|
65
66
|
disclaimer_link,
|
|
66
67
|
privacypolicy_link,
|
|
67
68
|
maxWidth = "lg",
|
|
69
|
+
referal,
|
|
68
70
|
}) {
|
|
69
71
|
const theme = useTheme();
|
|
70
72
|
|
|
@@ -84,22 +86,23 @@ function Footer({
|
|
|
84
86
|
<Toolbar disableGutters>
|
|
85
87
|
<Grid container sx={{ p: 2 }} spacing={2}>
|
|
86
88
|
<Grid item xs={12} sm={12} md={4} align="center">
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
89
|
+
<Box
|
|
90
|
+
sx={{
|
|
91
|
+
display: { xs: "none", md: "flex" },
|
|
92
|
+
cursor: "pointer",
|
|
93
|
+
flexDirection: "column",
|
|
94
|
+
alignItems: "center",
|
|
95
|
+
justifyContent: "flex-start",
|
|
96
|
+
height: "100%",
|
|
97
|
+
textDecoration: "none",
|
|
98
|
+
}}
|
|
99
|
+
>
|
|
100
|
+
<Typography variant="h6" color="#ffffff" sx={{ mb: 2 }}>
|
|
101
|
+
{site_title}
|
|
102
|
+
</Typography>
|
|
103
|
+
|
|
104
|
+
{logo && (
|
|
105
|
+
<NextLink href={`#home`}>
|
|
103
106
|
<Box
|
|
104
107
|
sx={{
|
|
105
108
|
display: "flex",
|
|
@@ -116,9 +119,9 @@ function Footer({
|
|
|
116
119
|
alt={logo.alternativeText || "site logo"}
|
|
117
120
|
/>
|
|
118
121
|
</Box>
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
</
|
|
122
|
+
</NextLink>
|
|
123
|
+
)}
|
|
124
|
+
</Box>
|
|
122
125
|
</Grid>
|
|
123
126
|
<Grid item xs={12} sm={6} md={4} align="center">
|
|
124
127
|
<Typography variant="h6" sx={{ mb: 2 }}>
|
|
@@ -243,24 +246,28 @@ function Footer({
|
|
|
243
246
|
pb: "50px",
|
|
244
247
|
}}
|
|
245
248
|
>
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
249
|
+
{referal ? (
|
|
250
|
+
referal
|
|
251
|
+
) : (
|
|
252
|
+
<MuiLink href="https://atelierpaulus.nl/">
|
|
253
|
+
<Typography
|
|
254
|
+
color="secondary.contrastText"
|
|
255
|
+
sx={{
|
|
256
|
+
textDecoration: "underline",
|
|
257
|
+
verticalAlign: "middle",
|
|
258
|
+
display: "flex",
|
|
259
|
+
alignItems: "center",
|
|
260
|
+
justifyContent: "center",
|
|
261
|
+
flexDirection: { xs: "column", sm: "row" },
|
|
262
|
+
gap: 2,
|
|
263
|
+
}}
|
|
264
|
+
>
|
|
265
|
+
Design & Webdevelopment
|
|
266
|
+
{APIcon !== null && <APIcon sx={{ mx: 2 }} />}
|
|
267
|
+
Atelier Paulus
|
|
268
|
+
</Typography>
|
|
269
|
+
</MuiLink>
|
|
270
|
+
)}
|
|
264
271
|
</Grid>
|
|
265
272
|
</Grid>
|
|
266
273
|
</Toolbar>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import React, { Fragment, useState } from "react";
|
|
3
|
+
import React, { Fragment, useState, useEffect } from "react";
|
|
4
4
|
import Link from "next/link";
|
|
5
5
|
import Image from "next/image";
|
|
6
6
|
import {
|
|
@@ -74,6 +74,25 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
|
|
|
74
74
|
|
|
75
75
|
const theme = useTheme();
|
|
76
76
|
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
const handleScroll = () => {
|
|
79
|
+
const sections = document.querySelectorAll("section");
|
|
80
|
+
const scrollPosition = window.scrollY + 1;
|
|
81
|
+
|
|
82
|
+
sections.forEach((section, index) => {
|
|
83
|
+
if (
|
|
84
|
+
scrollPosition >= section.offsetTop &&
|
|
85
|
+
scrollPosition < section.offsetTop + section.offsetHeight
|
|
86
|
+
) {
|
|
87
|
+
setCurrentTab(index);
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
window.addEventListener("scroll", handleScroll);
|
|
93
|
+
return () => window.removeEventListener("scroll", handleScroll);
|
|
94
|
+
}, []);
|
|
95
|
+
|
|
77
96
|
return (
|
|
78
97
|
<AppBar
|
|
79
98
|
position="sticky"
|
|
@@ -62,22 +62,22 @@ AMH.args = {
|
|
|
62
62
|
tabs: [
|
|
63
63
|
{
|
|
64
64
|
name: "Home",
|
|
65
|
-
link: "
|
|
65
|
+
link: "/#home",
|
|
66
66
|
slug: "home",
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
69
|
name: "Services",
|
|
70
|
-
link: "
|
|
70
|
+
link: "/#services",
|
|
71
71
|
slug: "services",
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
74
|
name: "About Us",
|
|
75
|
-
link: "
|
|
75
|
+
link: "/#about-us",
|
|
76
76
|
slug: "about-us",
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
name: "Contact",
|
|
80
|
-
link: "
|
|
80
|
+
link: "/#contact",
|
|
81
81
|
slug: "contact",
|
|
82
82
|
},
|
|
83
83
|
],
|