@greghowe79/the-lib 2.1.2 → 2.1.4
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.
|
@@ -10,101 +10,100 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
10
10
|
const location = qwikCity.useLocation();
|
|
11
11
|
const isOpen = qwik.useSignal(false);
|
|
12
12
|
qwik.useStyles$(styles);
|
|
13
|
-
return (
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
children:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
listItems?.map((item) => {
|
|
50
|
-
if (item.target === "_blank") {
|
|
51
|
-
return /* @__PURE__ */ jsxRuntime.jsx("li", {
|
|
52
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
53
|
-
href: item.href,
|
|
54
|
-
target: item.target,
|
|
55
|
-
rel: item.rel,
|
|
56
|
-
class: "menu-link",
|
|
57
|
-
onClick$: () => isOpen.value = false,
|
|
58
|
-
children: item.label
|
|
59
|
-
})
|
|
60
|
-
}, item.label);
|
|
61
|
-
}
|
|
13
|
+
return /* @__PURE__ */ jsxRuntime.jsx("nav", {
|
|
14
|
+
class: `menu ${isOpen.value ? "open" : ""}`,
|
|
15
|
+
"aria-label": ariaLabel,
|
|
16
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
17
|
+
class: "menu-container",
|
|
18
|
+
children: [
|
|
19
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
20
|
+
class: "menu-left",
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
23
|
+
href: `/${locale}`,
|
|
24
|
+
"aria-label": "Homepage",
|
|
25
|
+
onClick$: () => isOpen.value = false,
|
|
26
|
+
children: logoComponent && logoComponent({}, null, 0)
|
|
27
|
+
}),
|
|
28
|
+
/* @__PURE__ */ jsxRuntime.jsxs("button", {
|
|
29
|
+
"aria-label": "Toggle menu",
|
|
30
|
+
onClick$: () => isOpen.value = !isOpen.value,
|
|
31
|
+
class: `menu-toggle ${isOpen.value ? "open" : ""}`,
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
34
|
+
class: "bar"
|
|
35
|
+
}),
|
|
36
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
37
|
+
class: "bar"
|
|
38
|
+
}),
|
|
39
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
40
|
+
class: "bar"
|
|
41
|
+
})
|
|
42
|
+
]
|
|
43
|
+
}),
|
|
44
|
+
/* @__PURE__ */ jsxRuntime.jsxs("ul", {
|
|
45
|
+
class: `menu-list ${isOpen.value ? "open" : ""}`,
|
|
46
|
+
children: [
|
|
47
|
+
listItems?.map((item) => {
|
|
48
|
+
if (item.target === "_blank") {
|
|
62
49
|
return /* @__PURE__ */ jsxRuntime.jsx("li", {
|
|
63
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
50
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("a", {
|
|
64
51
|
href: item.href,
|
|
65
|
-
|
|
52
|
+
target: item.target,
|
|
53
|
+
rel: item.rel,
|
|
54
|
+
class: "menu-link",
|
|
66
55
|
onClick$: () => isOpen.value = false,
|
|
67
56
|
children: item.label
|
|
68
57
|
})
|
|
69
58
|
}, item.label);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
label: label ?? "",
|
|
78
|
-
onClick$: () => {
|
|
79
|
-
isOpen.value = false;
|
|
80
|
-
onClick$?.();
|
|
81
|
-
},
|
|
82
|
-
icon,
|
|
83
|
-
variant,
|
|
84
|
-
ariaLabel: ariaLabel2
|
|
85
|
-
}, id);
|
|
59
|
+
}
|
|
60
|
+
return /* @__PURE__ */ jsxRuntime.jsx("li", {
|
|
61
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
62
|
+
href: item.href,
|
|
63
|
+
class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
|
|
64
|
+
onClick$: () => isOpen.value = false,
|
|
65
|
+
children: item.label
|
|
86
66
|
})
|
|
67
|
+
}, item.label);
|
|
68
|
+
}),
|
|
69
|
+
actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("li", {
|
|
70
|
+
class: "mobile-only",
|
|
71
|
+
children: actions.map((action) => {
|
|
72
|
+
const { id, label, onClick$, variant, ariaLabel: ariaLabel2, icon, customColors } = action;
|
|
73
|
+
return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
|
|
74
|
+
id,
|
|
75
|
+
label: label ?? "",
|
|
76
|
+
onClick$: () => {
|
|
77
|
+
isOpen.value = false;
|
|
78
|
+
onClick$?.();
|
|
79
|
+
},
|
|
80
|
+
icon,
|
|
81
|
+
variant,
|
|
82
|
+
ariaLabel: ariaLabel2,
|
|
83
|
+
customColors
|
|
84
|
+
}, id);
|
|
87
85
|
})
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
]
|
|
91
|
-
}),
|
|
92
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
93
|
-
class: "menu-right desktop-only",
|
|
94
|
-
children: actions?.map((action) => {
|
|
95
|
-
return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
|
|
96
|
-
id: action.id,
|
|
97
|
-
label: action.label ?? "",
|
|
98
|
-
onClick$: action.onClick$,
|
|
99
|
-
icon: action.icon,
|
|
100
|
-
variant: action.variant,
|
|
101
|
-
ariaLabel: action.ariaLabel
|
|
102
|
-
}, action.id);
|
|
86
|
+
})
|
|
87
|
+
]
|
|
103
88
|
})
|
|
89
|
+
]
|
|
90
|
+
}),
|
|
91
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
92
|
+
class: "menu-right desktop-only",
|
|
93
|
+
children: actions?.map((action) => {
|
|
94
|
+
return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
|
|
95
|
+
id: action.id,
|
|
96
|
+
label: action.label ?? "",
|
|
97
|
+
onClick$: action.onClick$,
|
|
98
|
+
icon: action.icon,
|
|
99
|
+
variant: action.variant,
|
|
100
|
+
ariaLabel: action.ariaLabel,
|
|
101
|
+
customColors: action.customColors
|
|
102
|
+
}, action.id);
|
|
104
103
|
})
|
|
105
|
-
|
|
106
|
-
|
|
104
|
+
})
|
|
105
|
+
]
|
|
107
106
|
})
|
|
108
|
-
);
|
|
107
|
+
});
|
|
109
108
|
});
|
|
110
109
|
exports.NavigationMenu = NavigationMenu;
|
|
@@ -8,102 +8,101 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
8
8
|
const location = useLocation();
|
|
9
9
|
const isOpen = useSignal(false);
|
|
10
10
|
useStyles$(styles);
|
|
11
|
-
return (
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"
|
|
16
|
-
children:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
listItems?.map((item) => {
|
|
48
|
-
if (item.target === "_blank") {
|
|
49
|
-
return /* @__PURE__ */ jsx("li", {
|
|
50
|
-
children: /* @__PURE__ */ jsx("a", {
|
|
51
|
-
href: item.href,
|
|
52
|
-
target: item.target,
|
|
53
|
-
rel: item.rel,
|
|
54
|
-
class: "menu-link",
|
|
55
|
-
onClick$: () => isOpen.value = false,
|
|
56
|
-
children: item.label
|
|
57
|
-
})
|
|
58
|
-
}, item.label);
|
|
59
|
-
}
|
|
11
|
+
return /* @__PURE__ */ jsx("nav", {
|
|
12
|
+
class: `menu ${isOpen.value ? "open" : ""}`,
|
|
13
|
+
"aria-label": ariaLabel,
|
|
14
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
15
|
+
class: "menu-container",
|
|
16
|
+
children: [
|
|
17
|
+
/* @__PURE__ */ jsxs("div", {
|
|
18
|
+
class: "menu-left",
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ jsx(Link, {
|
|
21
|
+
href: `/${locale}`,
|
|
22
|
+
"aria-label": "Homepage",
|
|
23
|
+
onClick$: () => isOpen.value = false,
|
|
24
|
+
children: logoComponent && logoComponent({}, null, 0)
|
|
25
|
+
}),
|
|
26
|
+
/* @__PURE__ */ jsxs("button", {
|
|
27
|
+
"aria-label": "Toggle menu",
|
|
28
|
+
onClick$: () => isOpen.value = !isOpen.value,
|
|
29
|
+
class: `menu-toggle ${isOpen.value ? "open" : ""}`,
|
|
30
|
+
children: [
|
|
31
|
+
/* @__PURE__ */ jsx("span", {
|
|
32
|
+
class: "bar"
|
|
33
|
+
}),
|
|
34
|
+
/* @__PURE__ */ jsx("span", {
|
|
35
|
+
class: "bar"
|
|
36
|
+
}),
|
|
37
|
+
/* @__PURE__ */ jsx("span", {
|
|
38
|
+
class: "bar"
|
|
39
|
+
})
|
|
40
|
+
]
|
|
41
|
+
}),
|
|
42
|
+
/* @__PURE__ */ jsxs("ul", {
|
|
43
|
+
class: `menu-list ${isOpen.value ? "open" : ""}`,
|
|
44
|
+
children: [
|
|
45
|
+
listItems?.map((item) => {
|
|
46
|
+
if (item.target === "_blank") {
|
|
60
47
|
return /* @__PURE__ */ jsx("li", {
|
|
61
|
-
children: /* @__PURE__ */ jsx(
|
|
48
|
+
children: /* @__PURE__ */ jsx("a", {
|
|
62
49
|
href: item.href,
|
|
63
|
-
|
|
50
|
+
target: item.target,
|
|
51
|
+
rel: item.rel,
|
|
52
|
+
class: "menu-link",
|
|
64
53
|
onClick$: () => isOpen.value = false,
|
|
65
54
|
children: item.label
|
|
66
55
|
})
|
|
67
56
|
}, item.label);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
label: label ?? "",
|
|
76
|
-
onClick$: () => {
|
|
77
|
-
isOpen.value = false;
|
|
78
|
-
onClick$?.();
|
|
79
|
-
},
|
|
80
|
-
icon,
|
|
81
|
-
variant,
|
|
82
|
-
ariaLabel: ariaLabel2
|
|
83
|
-
}, id);
|
|
57
|
+
}
|
|
58
|
+
return /* @__PURE__ */ jsx("li", {
|
|
59
|
+
children: /* @__PURE__ */ jsx(Link, {
|
|
60
|
+
href: item.href,
|
|
61
|
+
class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
|
|
62
|
+
onClick$: () => isOpen.value = false,
|
|
63
|
+
children: item.label
|
|
84
64
|
})
|
|
65
|
+
}, item.label);
|
|
66
|
+
}),
|
|
67
|
+
actions && actions.length > 0 && /* @__PURE__ */ jsx("li", {
|
|
68
|
+
class: "mobile-only",
|
|
69
|
+
children: actions.map((action) => {
|
|
70
|
+
const { id, label, onClick$, variant, ariaLabel: ariaLabel2, icon, customColors } = action;
|
|
71
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
72
|
+
id,
|
|
73
|
+
label: label ?? "",
|
|
74
|
+
onClick$: () => {
|
|
75
|
+
isOpen.value = false;
|
|
76
|
+
onClick$?.();
|
|
77
|
+
},
|
|
78
|
+
icon,
|
|
79
|
+
variant,
|
|
80
|
+
ariaLabel: ariaLabel2,
|
|
81
|
+
customColors
|
|
82
|
+
}, id);
|
|
85
83
|
})
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
]
|
|
89
|
-
}),
|
|
90
|
-
/* @__PURE__ */ jsx("div", {
|
|
91
|
-
class: "menu-right desktop-only",
|
|
92
|
-
children: actions?.map((action) => {
|
|
93
|
-
return /* @__PURE__ */ jsx(Button, {
|
|
94
|
-
id: action.id,
|
|
95
|
-
label: action.label ?? "",
|
|
96
|
-
onClick$: action.onClick$,
|
|
97
|
-
icon: action.icon,
|
|
98
|
-
variant: action.variant,
|
|
99
|
-
ariaLabel: action.ariaLabel
|
|
100
|
-
}, action.id);
|
|
84
|
+
})
|
|
85
|
+
]
|
|
101
86
|
})
|
|
87
|
+
]
|
|
88
|
+
}),
|
|
89
|
+
/* @__PURE__ */ jsx("div", {
|
|
90
|
+
class: "menu-right desktop-only",
|
|
91
|
+
children: actions?.map((action) => {
|
|
92
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
93
|
+
id: action.id,
|
|
94
|
+
label: action.label ?? "",
|
|
95
|
+
onClick$: action.onClick$,
|
|
96
|
+
icon: action.icon,
|
|
97
|
+
variant: action.variant,
|
|
98
|
+
ariaLabel: action.ariaLabel,
|
|
99
|
+
customColors: action.customColors
|
|
100
|
+
}, action.id);
|
|
102
101
|
})
|
|
103
|
-
|
|
104
|
-
|
|
102
|
+
})
|
|
103
|
+
]
|
|
105
104
|
})
|
|
106
|
-
);
|
|
105
|
+
});
|
|
107
106
|
});
|
|
108
107
|
export {
|
|
109
108
|
NavigationMenu
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Component, type QRL, JSXOutput } from '@builder.io/qwik';
|
|
2
|
-
import { ButtonVariant } from '../button/button';
|
|
2
|
+
import { ButtonVariant, CustomColors } from '../button/button';
|
|
3
3
|
import '@fontsource/roboto-condensed/latin-500.css';
|
|
4
4
|
export interface NavItem {
|
|
5
5
|
label: string;
|
|
@@ -19,6 +19,7 @@ export interface NavigationMenuProps {
|
|
|
19
19
|
icon?: JSXOutput | Component<unknown>;
|
|
20
20
|
variant?: ButtonVariant;
|
|
21
21
|
ariaLabel?: string;
|
|
22
|
+
customColors?: CustomColors;
|
|
22
23
|
}>;
|
|
23
24
|
}
|
|
24
25
|
export declare const NavigationMenu: Component<NavigationMenuProps>;
|
package/lib-types/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { Logo } from './components/logo/logo';
|
|
2
2
|
export { Counter } from './components/counter/counter';
|
|
3
|
-
export { Button } from './components/button/button';
|
|
3
|
+
export { Button, type CustomColors } from './components/button/button';
|
|
4
4
|
export { NavigationMenu } from './components/navigationmenu/NavigationMenu';
|
|
5
5
|
export type { NavigationMenuProps, NavItem } from './components/navigationmenu/NavigationMenu';
|
|
6
6
|
export { Modal } from './components/modal/modal';
|