umwd-components 0.1.124 → 0.1.126
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/Page.js +9 -9
- package/dist/cjs/components/ScrollLink.js +2 -0
- package/dist/cjs/components/ScrollNavbar.js +17 -26
- package/dist/esm/components/Page.js +9 -9
- package/dist/esm/components/ScrollLink.js +2 -0
- package/dist/esm/components/ScrollNavbar.js +18 -27
- package/package.json +1 -1
- package/src/app/page.js +16 -16
- package/src/components/Page.js +9 -9
- package/src/components/ScrollLink.tsx +2 -0
- package/src/components/ScrollNavbar.tsx +15 -29
- package/src/components/custom/Footer.tsx +5 -1
- package/src/stories/ScrollNavbar.stories.js +0 -3
- package/src/stories/Stack.stories.js +1 -0
|
@@ -21,46 +21,46 @@ var material = require('@mui/material');
|
|
|
21
21
|
var ContactForm = require('./ContactForm.js');
|
|
22
22
|
var PersonaliaSection = require('./PersonaliaSection.js');
|
|
23
23
|
|
|
24
|
-
function blockRenderer(block) {
|
|
24
|
+
function blockRenderer(block, index) {
|
|
25
25
|
switch (block.__component) {
|
|
26
26
|
case "layout.hero-section":
|
|
27
27
|
return /*#__PURE__*/React.createElement(HeroSection.HeroSection, {
|
|
28
|
-
key:
|
|
28
|
+
key: index,
|
|
29
29
|
data: block
|
|
30
30
|
});
|
|
31
31
|
case "layout.features-section":
|
|
32
32
|
return /*#__PURE__*/React.createElement(FeaturesSection.FeatureSection, {
|
|
33
|
-
key:
|
|
33
|
+
key: index,
|
|
34
34
|
data: block
|
|
35
35
|
});
|
|
36
36
|
case "layout.contact-section":
|
|
37
37
|
return /*#__PURE__*/React.createElement(ContactForm.default, {
|
|
38
|
-
key:
|
|
38
|
+
key: index,
|
|
39
39
|
data: block
|
|
40
40
|
});
|
|
41
41
|
case "layout.text-image-section":
|
|
42
42
|
return /*#__PURE__*/React.createElement(TextImageSection.default, {
|
|
43
|
-
key:
|
|
43
|
+
key: index,
|
|
44
44
|
data: block
|
|
45
45
|
});
|
|
46
46
|
case "layout.icon-section":
|
|
47
47
|
return /*#__PURE__*/React.createElement(IconSection.IconSection, {
|
|
48
|
-
key:
|
|
48
|
+
key: index,
|
|
49
49
|
data: block
|
|
50
50
|
});
|
|
51
51
|
case "layout.fleet-section":
|
|
52
52
|
return /*#__PURE__*/React.createElement(FleetSection.FleetSection, {
|
|
53
|
-
key:
|
|
53
|
+
key: index,
|
|
54
54
|
data: block
|
|
55
55
|
});
|
|
56
56
|
case "layout.columns-section":
|
|
57
57
|
return /*#__PURE__*/React.createElement(ColumnsSection.ColumnsSection, {
|
|
58
|
-
key:
|
|
58
|
+
key: index,
|
|
59
59
|
data: block
|
|
60
60
|
});
|
|
61
61
|
case "layout.personalia-section":
|
|
62
62
|
return /*#__PURE__*/React.createElement(PersonaliaSection.PersonaliaSection, {
|
|
63
|
-
key:
|
|
63
|
+
key: index,
|
|
64
64
|
data: block
|
|
65
65
|
});
|
|
66
66
|
default:
|
|
@@ -25,7 +25,9 @@ const ScrollLink = _ref => {
|
|
|
25
25
|
e.preventDefault();
|
|
26
26
|
//remove everything before the hash
|
|
27
27
|
const targetId = e.currentTarget.href.replace(/.*\#/, "");
|
|
28
|
+
console.log("targetId", targetId);
|
|
28
29
|
const elem = document.getElementById(targetId);
|
|
30
|
+
console.log("elem", elem);
|
|
29
31
|
window.scrollTo({
|
|
30
32
|
top: elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect().top,
|
|
31
33
|
behavior: "smooth"
|
|
@@ -20,7 +20,6 @@ var ScrollLink = require('./ScrollLink.js');
|
|
|
20
20
|
/* TODO: combine these, and use conf/setting to manipulate how to display */
|
|
21
21
|
|
|
22
22
|
function ScrollNavbar(_ref) {
|
|
23
|
-
var _tabs$;
|
|
24
23
|
let {
|
|
25
24
|
data
|
|
26
25
|
} = _ref;
|
|
@@ -33,19 +32,13 @@ function ScrollNavbar(_ref) {
|
|
|
33
32
|
minHeight
|
|
34
33
|
} = data;
|
|
35
34
|
const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
|
|
36
|
-
const [currentTab, setCurrentTab] = React.useState(
|
|
35
|
+
const [currentTab, setCurrentTab] = React.useState(0);
|
|
37
36
|
const handleOpenMobileMenu = () => {
|
|
38
37
|
setMobileNavOpen(true);
|
|
39
38
|
};
|
|
40
39
|
const handleCloseMobileMenu = () => {
|
|
41
40
|
setMobileNavOpen(false);
|
|
42
41
|
};
|
|
43
|
-
|
|
44
|
-
/* const router = useRouter(); */
|
|
45
|
-
|
|
46
|
-
const handleChange = (event, newValue) => {
|
|
47
|
-
setCurrentTab(newValue);
|
|
48
|
-
};
|
|
49
42
|
const theme = material.useTheme();
|
|
50
43
|
return /*#__PURE__*/React.createElement(material.AppBar, {
|
|
51
44
|
position: "sticky",
|
|
@@ -107,10 +100,7 @@ function ScrollNavbar(_ref) {
|
|
|
107
100
|
return /*#__PURE__*/React.createElement(ScrollLink.default, {
|
|
108
101
|
key: page.name,
|
|
109
102
|
href: "#".concat(page.slug)
|
|
110
|
-
}, /*#__PURE__*/React.createElement(material.Button
|
|
111
|
-
/* onClick={() => {
|
|
112
|
-
router.push(page.url);
|
|
113
|
-
}} */, {
|
|
103
|
+
}, /*#__PURE__*/React.createElement(material.Button, {
|
|
114
104
|
sx: {
|
|
115
105
|
my: 2,
|
|
116
106
|
color: "primary.contrastText",
|
|
@@ -127,25 +117,25 @@ function ScrollNavbar(_ref) {
|
|
|
127
117
|
}
|
|
128
118
|
}, /*#__PURE__*/React.createElement(material.Tabs, {
|
|
129
119
|
value: currentTab,
|
|
130
|
-
onChange: (event, newValue) => handleChange(event, newValue),
|
|
131
120
|
"aria-label": "wrapped label tabs example",
|
|
132
121
|
textColor: "secondary",
|
|
133
122
|
indicatorColor: "secondary",
|
|
134
123
|
variant: "fullWidth"
|
|
135
|
-
}, tabs.length > 0 && tabs.map(tab => {
|
|
136
|
-
return /*#__PURE__*/React.createElement(
|
|
124
|
+
}, tabs.length > 0 && tabs.map((tab, index) => {
|
|
125
|
+
return /*#__PURE__*/React.createElement(material.Box, {
|
|
137
126
|
key: tab.name,
|
|
138
|
-
|
|
127
|
+
onClick: e => setCurrentTab(index)
|
|
128
|
+
}, /*#__PURE__*/React.createElement(ScrollLink.default, {
|
|
129
|
+
key: tab.name,
|
|
130
|
+
href: "#".concat(tab.slug),
|
|
131
|
+
style: {
|
|
132
|
+
display: "block",
|
|
133
|
+
height: "100%"
|
|
134
|
+
}
|
|
139
135
|
}, /*#__PURE__*/React.createElement(material.Tab, {
|
|
140
|
-
value:
|
|
136
|
+
value: index,
|
|
141
137
|
label: tab.name
|
|
142
|
-
|
|
143
|
-
router.push(tab.url);
|
|
144
|
-
}} */,
|
|
145
|
-
sx: {
|
|
146
|
-
p: 1
|
|
147
|
-
}
|
|
148
|
-
}));
|
|
138
|
+
})));
|
|
149
139
|
}))), /*#__PURE__*/React.createElement(Link, {
|
|
150
140
|
href: "/",
|
|
151
141
|
style: {
|
|
@@ -278,8 +268,9 @@ function ScrollNavbar(_ref) {
|
|
|
278
268
|
color: "primary.contrastText"
|
|
279
269
|
}
|
|
280
270
|
}))))), pages && pages.length > 0 && /*#__PURE__*/React.createElement(material.List, null, pages.map(page => {
|
|
281
|
-
return /*#__PURE__*/React.createElement(React.Fragment,
|
|
282
|
-
key: page.name
|
|
271
|
+
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
272
|
+
key: page.name
|
|
273
|
+
}, /*#__PURE__*/React.createElement(ScrollLink.default, {
|
|
283
274
|
href: "#".concat(page.slug)
|
|
284
275
|
}, /*#__PURE__*/React.createElement(material.ListItem
|
|
285
276
|
/* onClick={() => {
|
|
@@ -17,46 +17,46 @@ import { Box } from '@mui/material';
|
|
|
17
17
|
import ContactForm from './ContactForm.js';
|
|
18
18
|
import { PersonaliaSection } from './PersonaliaSection.js';
|
|
19
19
|
|
|
20
|
-
function blockRenderer(block) {
|
|
20
|
+
function blockRenderer(block, index) {
|
|
21
21
|
switch (block.__component) {
|
|
22
22
|
case "layout.hero-section":
|
|
23
23
|
return /*#__PURE__*/React__default.createElement(HeroSection, {
|
|
24
|
-
key:
|
|
24
|
+
key: index,
|
|
25
25
|
data: block
|
|
26
26
|
});
|
|
27
27
|
case "layout.features-section":
|
|
28
28
|
return /*#__PURE__*/React__default.createElement(FeatureSection, {
|
|
29
|
-
key:
|
|
29
|
+
key: index,
|
|
30
30
|
data: block
|
|
31
31
|
});
|
|
32
32
|
case "layout.contact-section":
|
|
33
33
|
return /*#__PURE__*/React__default.createElement(ContactForm, {
|
|
34
|
-
key:
|
|
34
|
+
key: index,
|
|
35
35
|
data: block
|
|
36
36
|
});
|
|
37
37
|
case "layout.text-image-section":
|
|
38
38
|
return /*#__PURE__*/React__default.createElement(TextImageSection, {
|
|
39
|
-
key:
|
|
39
|
+
key: index,
|
|
40
40
|
data: block
|
|
41
41
|
});
|
|
42
42
|
case "layout.icon-section":
|
|
43
43
|
return /*#__PURE__*/React__default.createElement(IconSection, {
|
|
44
|
-
key:
|
|
44
|
+
key: index,
|
|
45
45
|
data: block
|
|
46
46
|
});
|
|
47
47
|
case "layout.fleet-section":
|
|
48
48
|
return /*#__PURE__*/React__default.createElement(FleetSection, {
|
|
49
|
-
key:
|
|
49
|
+
key: index,
|
|
50
50
|
data: block
|
|
51
51
|
});
|
|
52
52
|
case "layout.columns-section":
|
|
53
53
|
return /*#__PURE__*/React__default.createElement(ColumnsSection, {
|
|
54
|
-
key:
|
|
54
|
+
key: index,
|
|
55
55
|
data: block
|
|
56
56
|
});
|
|
57
57
|
case "layout.personalia-section":
|
|
58
58
|
return /*#__PURE__*/React__default.createElement(PersonaliaSection, {
|
|
59
|
-
key:
|
|
59
|
+
key: index,
|
|
60
60
|
data: block
|
|
61
61
|
});
|
|
62
62
|
default:
|
|
@@ -21,7 +21,9 @@ const ScrollLink = _ref => {
|
|
|
21
21
|
e.preventDefault();
|
|
22
22
|
//remove everything before the hash
|
|
23
23
|
const targetId = e.currentTarget.href.replace(/.*\#/, "");
|
|
24
|
+
console.log("targetId", targetId);
|
|
24
25
|
const elem = document.getElementById(targetId);
|
|
26
|
+
console.log("elem", elem);
|
|
25
27
|
window.scrollTo({
|
|
26
28
|
top: elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect().top,
|
|
27
29
|
behavior: "smooth"
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* @license MIT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import React__default, { useState } from 'react';
|
|
8
|
+
import React__default, { useState, 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';
|
|
@@ -16,7 +16,6 @@ import ScrollLink from './ScrollLink.js';
|
|
|
16
16
|
/* TODO: combine these, and use conf/setting to manipulate how to display */
|
|
17
17
|
|
|
18
18
|
function ScrollNavbar(_ref) {
|
|
19
|
-
var _tabs$;
|
|
20
19
|
let {
|
|
21
20
|
data
|
|
22
21
|
} = _ref;
|
|
@@ -29,19 +28,13 @@ function ScrollNavbar(_ref) {
|
|
|
29
28
|
minHeight
|
|
30
29
|
} = data;
|
|
31
30
|
const [mobileNavOpen, setMobileNavOpen] = useState(false);
|
|
32
|
-
const [currentTab, setCurrentTab] = useState(
|
|
31
|
+
const [currentTab, setCurrentTab] = useState(0);
|
|
33
32
|
const handleOpenMobileMenu = () => {
|
|
34
33
|
setMobileNavOpen(true);
|
|
35
34
|
};
|
|
36
35
|
const handleCloseMobileMenu = () => {
|
|
37
36
|
setMobileNavOpen(false);
|
|
38
37
|
};
|
|
39
|
-
|
|
40
|
-
/* const router = useRouter(); */
|
|
41
|
-
|
|
42
|
-
const handleChange = (event, newValue) => {
|
|
43
|
-
setCurrentTab(newValue);
|
|
44
|
-
};
|
|
45
38
|
const theme = useTheme();
|
|
46
39
|
return /*#__PURE__*/React__default.createElement(AppBar, {
|
|
47
40
|
position: "sticky",
|
|
@@ -103,10 +96,7 @@ function ScrollNavbar(_ref) {
|
|
|
103
96
|
return /*#__PURE__*/React__default.createElement(ScrollLink, {
|
|
104
97
|
key: page.name,
|
|
105
98
|
href: "#".concat(page.slug)
|
|
106
|
-
}, /*#__PURE__*/React__default.createElement(Button
|
|
107
|
-
/* onClick={() => {
|
|
108
|
-
router.push(page.url);
|
|
109
|
-
}} */, {
|
|
99
|
+
}, /*#__PURE__*/React__default.createElement(Button, {
|
|
110
100
|
sx: {
|
|
111
101
|
my: 2,
|
|
112
102
|
color: "primary.contrastText",
|
|
@@ -123,25 +113,25 @@ function ScrollNavbar(_ref) {
|
|
|
123
113
|
}
|
|
124
114
|
}, /*#__PURE__*/React__default.createElement(Tabs, {
|
|
125
115
|
value: currentTab,
|
|
126
|
-
onChange: (event, newValue) => handleChange(event, newValue),
|
|
127
116
|
"aria-label": "wrapped label tabs example",
|
|
128
117
|
textColor: "secondary",
|
|
129
118
|
indicatorColor: "secondary",
|
|
130
119
|
variant: "fullWidth"
|
|
131
|
-
}, tabs.length > 0 && tabs.map(tab => {
|
|
132
|
-
return /*#__PURE__*/React__default.createElement(
|
|
120
|
+
}, tabs.length > 0 && tabs.map((tab, index) => {
|
|
121
|
+
return /*#__PURE__*/React__default.createElement(Box, {
|
|
133
122
|
key: tab.name,
|
|
134
|
-
|
|
123
|
+
onClick: e => setCurrentTab(index)
|
|
124
|
+
}, /*#__PURE__*/React__default.createElement(ScrollLink, {
|
|
125
|
+
key: tab.name,
|
|
126
|
+
href: "#".concat(tab.slug),
|
|
127
|
+
style: {
|
|
128
|
+
display: "block",
|
|
129
|
+
height: "100%"
|
|
130
|
+
}
|
|
135
131
|
}, /*#__PURE__*/React__default.createElement(Tab, {
|
|
136
|
-
value:
|
|
132
|
+
value: index,
|
|
137
133
|
label: tab.name
|
|
138
|
-
|
|
139
|
-
router.push(tab.url);
|
|
140
|
-
}} */,
|
|
141
|
-
sx: {
|
|
142
|
-
p: 1
|
|
143
|
-
}
|
|
144
|
-
}));
|
|
134
|
+
})));
|
|
145
135
|
}))), /*#__PURE__*/React__default.createElement(Link, {
|
|
146
136
|
href: "/",
|
|
147
137
|
style: {
|
|
@@ -274,8 +264,9 @@ function ScrollNavbar(_ref) {
|
|
|
274
264
|
color: "primary.contrastText"
|
|
275
265
|
}
|
|
276
266
|
}))))), pages && pages.length > 0 && /*#__PURE__*/React__default.createElement(List, null, pages.map(page => {
|
|
277
|
-
return /*#__PURE__*/React__default.createElement(
|
|
278
|
-
key: page.name
|
|
267
|
+
return /*#__PURE__*/React__default.createElement(Fragment, {
|
|
268
|
+
key: page.name
|
|
269
|
+
}, /*#__PURE__*/React__default.createElement(ScrollLink, {
|
|
279
270
|
href: "#".concat(page.slug)
|
|
280
271
|
}, /*#__PURE__*/React__default.createElement(ListItem
|
|
281
272
|
/* onClick={() => {
|
package/package.json
CHANGED
package/src/app/page.js
CHANGED
|
@@ -11,7 +11,7 @@ export default async function Home() {
|
|
|
11
11
|
{/* TODO, create and extract BGcomponent */}
|
|
12
12
|
{/* <Box sx={{}}> */}
|
|
13
13
|
|
|
14
|
-
{pages &&
|
|
14
|
+
{/* {pages &&
|
|
15
15
|
pages.data.length > 0 &&
|
|
16
16
|
pages.data.map((page) => {
|
|
17
17
|
console.dir(page, { depth: 10 });
|
|
@@ -56,20 +56,20 @@ export default async function Home() {
|
|
|
56
56
|
|
|
57
57
|
return (
|
|
58
58
|
<Fragment key={page.id}>
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
59
|
+
//<Image
|
|
60
|
+
// alt="Background"
|
|
61
|
+
// style={{
|
|
62
|
+
// position: "fixed",
|
|
63
|
+
// inset: 0,
|
|
64
|
+
// objectFit: "cover",
|
|
65
|
+
// width: "100%",
|
|
66
|
+
// height: "100%",
|
|
67
|
+
// zIndex: -1,
|
|
68
|
+
// }}
|
|
69
|
+
// height={darkBG.height || 1080}
|
|
70
|
+
// src={darkBG.src}
|
|
71
|
+
// width={darkBG.width || 1920}
|
|
72
|
+
///>
|
|
73
73
|
{page.title !== "HOME" && (
|
|
74
74
|
<Container maxWidth="lg">
|
|
75
75
|
<Typography
|
|
@@ -93,7 +93,7 @@ export default async function Home() {
|
|
|
93
93
|
/>
|
|
94
94
|
</Fragment>
|
|
95
95
|
);
|
|
96
|
-
})}
|
|
96
|
+
})} */}
|
|
97
97
|
</main>
|
|
98
98
|
);
|
|
99
99
|
}
|
package/src/components/Page.js
CHANGED
|
@@ -12,24 +12,24 @@ import { Box } from "@mui/material";
|
|
|
12
12
|
import ContactForm from "./ContactForm.tsx";
|
|
13
13
|
import { PersonaliaSection } from "./PersonaliaSection.tsx";
|
|
14
14
|
|
|
15
|
-
function blockRenderer(block) {
|
|
15
|
+
function blockRenderer(block, index) {
|
|
16
16
|
switch (block.__component) {
|
|
17
17
|
case "layout.hero-section":
|
|
18
|
-
return <HeroSection key={
|
|
18
|
+
return <HeroSection key={index} data={block} />;
|
|
19
19
|
case "layout.features-section":
|
|
20
|
-
return <FeatureSection key={
|
|
20
|
+
return <FeatureSection key={index} data={block} />;
|
|
21
21
|
case "layout.contact-section":
|
|
22
|
-
return <ContactForm key={
|
|
22
|
+
return <ContactForm key={index} data={block} />;
|
|
23
23
|
case "layout.text-image-section":
|
|
24
|
-
return <TextImageSection key={
|
|
24
|
+
return <TextImageSection key={index} data={block} />;
|
|
25
25
|
case "layout.icon-section":
|
|
26
|
-
return <IconSection key={
|
|
26
|
+
return <IconSection key={index} data={block} />;
|
|
27
27
|
case "layout.fleet-section":
|
|
28
|
-
return <FleetSection key={
|
|
28
|
+
return <FleetSection key={index} data={block} />;
|
|
29
29
|
case "layout.columns-section":
|
|
30
|
-
return <ColumnsSection key={
|
|
30
|
+
return <ColumnsSection key={index} data={block} />;
|
|
31
31
|
case "layout.personalia-section":
|
|
32
|
-
return <PersonaliaSection key={
|
|
32
|
+
return <PersonaliaSection key={index} data={block} />;
|
|
33
33
|
|
|
34
34
|
default:
|
|
35
35
|
return null;
|
|
@@ -15,7 +15,9 @@ const ScrollLink = ({ children, ...props }: ScrollLinkProps) => {
|
|
|
15
15
|
e.preventDefault();
|
|
16
16
|
//remove everything before the hash
|
|
17
17
|
const targetId = e.currentTarget.href.replace(/.*\#/, "");
|
|
18
|
+
console.log("targetId", targetId);
|
|
18
19
|
const elem = document.getElementById(targetId);
|
|
20
|
+
console.log("elem", elem);
|
|
19
21
|
window.scrollTo({
|
|
20
22
|
top: elem?.getBoundingClientRect().top,
|
|
21
23
|
behavior: "smooth",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import React, { useState } from "react";
|
|
3
|
+
import React, { Fragment, useState } from "react";
|
|
4
4
|
import Link from "next/link";
|
|
5
5
|
import Image from "next/image";
|
|
6
6
|
import {
|
|
@@ -21,7 +21,6 @@ import {
|
|
|
21
21
|
} from "@mui/material";
|
|
22
22
|
import CloseIcon from "@mui/icons-material/Close";
|
|
23
23
|
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
|
24
|
-
/* import { useRouter } from "next/router"; */
|
|
25
24
|
import ScrollLink from "./ScrollLink.tsx";
|
|
26
25
|
|
|
27
26
|
interface ImageProps {
|
|
@@ -61,7 +60,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
|
|
|
61
60
|
const { site_title, logo, pages, tabs, maxWidth, minHeight } = data;
|
|
62
61
|
|
|
63
62
|
const [mobileNavOpen, setMobileNavOpen] = useState(false);
|
|
64
|
-
const [currentTab, setCurrentTab] = useState(
|
|
63
|
+
const [currentTab, setCurrentTab] = useState(0);
|
|
65
64
|
|
|
66
65
|
const handleOpenMobileMenu = () => {
|
|
67
66
|
setMobileNavOpen(true);
|
|
@@ -71,12 +70,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
|
|
|
71
70
|
setMobileNavOpen(false);
|
|
72
71
|
};
|
|
73
72
|
|
|
74
|
-
/* const router = useRouter(); */
|
|
75
|
-
|
|
76
|
-
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
|
|
77
|
-
setCurrentTab(newValue);
|
|
78
|
-
};
|
|
79
|
-
|
|
80
73
|
const theme = useTheme();
|
|
81
74
|
|
|
82
75
|
return (
|
|
@@ -95,7 +88,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
|
|
|
95
88
|
}}
|
|
96
89
|
>
|
|
97
90
|
{/* logo and site title for big screens */}
|
|
98
|
-
{/* <Link href="/" style={{ textDecoration: "none", color: "unset" }}> */}
|
|
99
91
|
<ScrollLink href={`#home`}>
|
|
100
92
|
<Box
|
|
101
93
|
sx={{
|
|
@@ -128,7 +120,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
|
|
|
128
120
|
)}
|
|
129
121
|
</Box>
|
|
130
122
|
</ScrollLink>
|
|
131
|
-
{/* </Link> */}
|
|
132
123
|
|
|
133
124
|
<Box sx={{ display: "block", width: "30px" }}></Box>
|
|
134
125
|
|
|
@@ -145,9 +136,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
|
|
|
145
136
|
return (
|
|
146
137
|
<ScrollLink key={page.name} href={`#${page.slug}`}>
|
|
147
138
|
<Button
|
|
148
|
-
/* onClick={() => {
|
|
149
|
-
router.push(page.url);
|
|
150
|
-
}} */
|
|
151
139
|
sx={{
|
|
152
140
|
my: 2,
|
|
153
141
|
color: "primary.contrastText",
|
|
@@ -172,25 +160,23 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
|
|
|
172
160
|
>
|
|
173
161
|
<Tabs
|
|
174
162
|
value={currentTab}
|
|
175
|
-
onChange={(event, newValue) => handleChange(event, newValue)}
|
|
176
163
|
aria-label="wrapped label tabs example"
|
|
177
164
|
textColor="secondary"
|
|
178
165
|
indicatorColor="secondary"
|
|
179
166
|
variant="fullWidth"
|
|
180
167
|
>
|
|
181
168
|
{tabs.length > 0 &&
|
|
182
|
-
tabs.map((tab: TabInfo) => {
|
|
169
|
+
tabs.map((tab: TabInfo, index: number) => {
|
|
183
170
|
return (
|
|
184
|
-
<
|
|
185
|
-
<
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
</ScrollLink>
|
|
171
|
+
<Box key={tab.name} onClick={(e) => setCurrentTab(index)}>
|
|
172
|
+
<ScrollLink
|
|
173
|
+
key={tab.name}
|
|
174
|
+
href={`#${tab.slug}`}
|
|
175
|
+
style={{ display: "block", height: "100%" }}
|
|
176
|
+
>
|
|
177
|
+
<Tab value={index} label={tab.name} />
|
|
178
|
+
</ScrollLink>
|
|
179
|
+
</Box>
|
|
194
180
|
);
|
|
195
181
|
})}
|
|
196
182
|
</Tabs>
|
|
@@ -316,8 +302,8 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
|
|
|
316
302
|
<List>
|
|
317
303
|
{pages.map((page: Page) => {
|
|
318
304
|
return (
|
|
319
|
-
|
|
320
|
-
<ScrollLink
|
|
305
|
+
<Fragment key={page.name}>
|
|
306
|
+
<ScrollLink href={`#${page.slug}`}>
|
|
321
307
|
<ListItem
|
|
322
308
|
/* onClick={() => {
|
|
323
309
|
router.push(page.url);
|
|
@@ -328,7 +314,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
|
|
|
328
314
|
</ListItem>
|
|
329
315
|
</ScrollLink>
|
|
330
316
|
<Divider />
|
|
331
|
-
|
|
317
|
+
</Fragment>
|
|
332
318
|
);
|
|
333
319
|
})}
|
|
334
320
|
</List>
|
|
@@ -37,7 +37,11 @@ export function Footer({ data }: Readonly<FooterProps>) {
|
|
|
37
37
|
<div className="flex items-center space-x-4">
|
|
38
38
|
{socialLink.map((link) => {
|
|
39
39
|
return (
|
|
40
|
-
<Link
|
|
40
|
+
<Link
|
|
41
|
+
className="text-white hover:text-gray-300"
|
|
42
|
+
href={link.url}
|
|
43
|
+
key={link.id}
|
|
44
|
+
>
|
|
41
45
|
{selectSocialIcon(link.url)}
|
|
42
46
|
<span className="sr-only">Visit us at {link.text}</span>
|
|
43
47
|
</Link>
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import ScrollNavbar from "../components/ScrollNavbar.tsx";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
|
|
4
3
|
import logoText from "../../public/logo_text.png";
|
|
5
4
|
|
|
6
5
|
export default {
|
|
@@ -9,8 +8,6 @@ export default {
|
|
|
9
8
|
};
|
|
10
9
|
|
|
11
10
|
const Template = ({ ...args }) => {
|
|
12
|
-
console.log(thumbnail);
|
|
13
|
-
|
|
14
11
|
return <ScrollNavbar {...args} />;
|
|
15
12
|
};
|
|
16
13
|
|