@greghowe79/the-lib 1.3.6 → 1.3.8
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/lib/components/card/styles.css.qwik.cjs +1 -1
- package/lib/components/card/styles.css.qwik.mjs +1 -1
- package/lib/components/navigationmenu/NavigationMenu.qwik.cjs +41 -11
- package/lib/components/navigationmenu/NavigationMenu.qwik.mjs +42 -12
- package/lib/components/navigationmenu/styles.css.qwik.cjs +1 -1
- package/lib/components/navigationmenu/styles.css.qwik.mjs +1 -1
- package/lib-types/stories/navigation-menu.stories.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n height: 200px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #0a66c2;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar {\r\n box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);\r\n border-radius: 50%;\r\n object-position: center;\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-64px);\r\n}\r\n\r\n.card-fullname {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 11px;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-7px);\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
|
|
2
|
+
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n height: 200px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #0a66c2;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar {\r\n box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);\r\n border-radius: 50%;\r\n object-position: center;\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-64px);\r\n}\r\n\r\n.card-fullname {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 11px;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-7px);\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
|
|
3
3
|
module.exports = styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n height: 200px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #0a66c2;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar {\r\n box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);\r\n border-radius: 50%;\r\n object-position: center;\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-64px);\r\n}\r\n\r\n.card-fullname {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 11px;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-7px);\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
|
|
1
|
+
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n height: 200px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #0a66c2;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar {\r\n box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);\r\n border-radius: 50%;\r\n object-position: center;\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-64px);\r\n}\r\n\r\n.card-fullname {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 11px;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-7px);\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -8,6 +8,7 @@ const button = require("../button/button.qwik.cjs");
|
|
|
8
8
|
require("@fontsource/roboto-condensed/500.css");
|
|
9
9
|
const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, actions, locale }) => {
|
|
10
10
|
const location = qwikCity.useLocation();
|
|
11
|
+
const isOpen = qwik.useSignal(false);
|
|
11
12
|
qwik.useStyles$(styles);
|
|
12
13
|
return /* @__PURE__ */ jsxRuntime.jsx("nav", {
|
|
13
14
|
class: "menu",
|
|
@@ -23,22 +24,51 @@ const NavigationMenu = qwik.component$(({ ariaLabel, logoComponent, listItems, a
|
|
|
23
24
|
"aria-label": "Homepage",
|
|
24
25
|
children: logoComponent && logoComponent({}, null, 0)
|
|
25
26
|
}),
|
|
26
|
-
/* @__PURE__ */ jsxRuntime.
|
|
27
|
+
/* @__PURE__ */ jsxRuntime.jsxs("button", {
|
|
28
|
+
class: "menu-toggle",
|
|
29
|
+
"aria-label": "Toggle menu",
|
|
30
|
+
onClick$: () => isOpen.value = !isOpen.value,
|
|
31
|
+
children: [
|
|
32
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
33
|
+
class: "bar"
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
36
|
+
class: "bar"
|
|
37
|
+
}),
|
|
38
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
39
|
+
class: "bar"
|
|
40
|
+
})
|
|
41
|
+
]
|
|
42
|
+
}),
|
|
43
|
+
/* @__PURE__ */ jsxRuntime.jsxs("ul", {
|
|
27
44
|
class: "menu-list",
|
|
28
|
-
children:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
45
|
+
children: [
|
|
46
|
+
listItems?.map((item) => {
|
|
47
|
+
return /* @__PURE__ */ jsxRuntime.jsx("li", {
|
|
48
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
49
|
+
href: item.href,
|
|
50
|
+
class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
|
|
51
|
+
children: item.label
|
|
52
|
+
})
|
|
53
|
+
}, item.label);
|
|
54
|
+
}),
|
|
55
|
+
actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("li", {
|
|
56
|
+
class: "mobile-only",
|
|
57
|
+
children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
|
|
58
|
+
id: action.id,
|
|
59
|
+
label: action.label ?? "",
|
|
60
|
+
onClick$: action.onClick$,
|
|
61
|
+
icon: action.icon,
|
|
62
|
+
variant: action.variant,
|
|
63
|
+
ariaLabel: action.ariaLabel
|
|
64
|
+
}, action.id))
|
|
65
|
+
})
|
|
66
|
+
]
|
|
37
67
|
})
|
|
38
68
|
]
|
|
39
69
|
}),
|
|
40
70
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
41
|
-
class: "menu-right",
|
|
71
|
+
class: "menu-right desktop-only",
|
|
42
72
|
children: actions?.map((action) => {
|
|
43
73
|
return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
|
|
44
74
|
id: action.id,
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
|
|
2
|
-
import { component$, useStyles$ } from "@builder.io/qwik";
|
|
2
|
+
import { component$, useSignal, useStyles$ } from "@builder.io/qwik";
|
|
3
3
|
import { useLocation, Link } from "@builder.io/qwik-city";
|
|
4
4
|
import styles from "./styles.css.qwik.mjs";
|
|
5
5
|
import { Button } from "../button/button.qwik.mjs";
|
|
6
6
|
import "@fontsource/roboto-condensed/500.css";
|
|
7
7
|
const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, actions, locale }) => {
|
|
8
8
|
const location = useLocation();
|
|
9
|
+
const isOpen = useSignal(false);
|
|
9
10
|
useStyles$(styles);
|
|
10
11
|
return /* @__PURE__ */ jsx("nav", {
|
|
11
12
|
class: "menu",
|
|
@@ -21,22 +22,51 @@ const NavigationMenu = component$(({ ariaLabel, logoComponent, listItems, action
|
|
|
21
22
|
"aria-label": "Homepage",
|
|
22
23
|
children: logoComponent && logoComponent({}, null, 0)
|
|
23
24
|
}),
|
|
24
|
-
/* @__PURE__ */
|
|
25
|
+
/* @__PURE__ */ jsxs("button", {
|
|
26
|
+
class: "menu-toggle",
|
|
27
|
+
"aria-label": "Toggle menu",
|
|
28
|
+
onClick$: () => isOpen.value = !isOpen.value,
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ jsx("span", {
|
|
31
|
+
class: "bar"
|
|
32
|
+
}),
|
|
33
|
+
/* @__PURE__ */ jsx("span", {
|
|
34
|
+
class: "bar"
|
|
35
|
+
}),
|
|
36
|
+
/* @__PURE__ */ jsx("span", {
|
|
37
|
+
class: "bar"
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
}),
|
|
41
|
+
/* @__PURE__ */ jsxs("ul", {
|
|
25
42
|
class: "menu-list",
|
|
26
|
-
children:
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
43
|
+
children: [
|
|
44
|
+
listItems?.map((item) => {
|
|
45
|
+
return /* @__PURE__ */ jsx("li", {
|
|
46
|
+
children: /* @__PURE__ */ jsx(Link, {
|
|
47
|
+
href: item.href,
|
|
48
|
+
class: `${location.url.pathname === item.href ? "active" : "menu-link"}`,
|
|
49
|
+
children: item.label
|
|
50
|
+
})
|
|
51
|
+
}, item.label);
|
|
52
|
+
}),
|
|
53
|
+
actions && actions.length > 0 && /* @__PURE__ */ jsx("li", {
|
|
54
|
+
class: "mobile-only",
|
|
55
|
+
children: actions.map((action) => /* @__PURE__ */ jsx(Button, {
|
|
56
|
+
id: action.id,
|
|
57
|
+
label: action.label ?? "",
|
|
58
|
+
onClick$: action.onClick$,
|
|
59
|
+
icon: action.icon,
|
|
60
|
+
variant: action.variant,
|
|
61
|
+
ariaLabel: action.ariaLabel
|
|
62
|
+
}, action.id))
|
|
63
|
+
})
|
|
64
|
+
]
|
|
35
65
|
})
|
|
36
66
|
]
|
|
37
67
|
}),
|
|
38
68
|
/* @__PURE__ */ jsx("div", {
|
|
39
|
-
class: "menu-right",
|
|
69
|
+
class: "menu-right desktop-only",
|
|
40
70
|
children: actions?.map((action) => {
|
|
41
71
|
return /* @__PURE__ */ jsx(Button, {
|
|
42
72
|
id: action.id,
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const styles = ".menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n padding: 1rem
|
|
2
|
+
const styles = ".menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n /* padding: 1rem; */\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n}\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n}\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n.menu-right {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n/* Hamburger button */\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s;\r\n}\r\n\r\n/* Helpers per mostrare/nascondere blocchi */\r\n.desktop-only {\r\n display: flex; /* actions desktop */\r\n}\r\n\r\n.mobile-only {\r\n display: none; /* actions mobile dentro hamburger */\r\n}\r\n\r\n/* ------------------ Breakpoints ------------------ */\r\n\r\n/* Mobile piccolo (<768px) */\r\n@media (max-width: 767px) {\r\n .menu-list {\r\n position: absolute;\r\n top: 64px;\r\n left: 0;\r\n right: 0;\r\n background-color: white;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 1rem;\r\n padding: 1rem;\r\n display: none; /* nascosto di default */\r\n z-index: 5;\r\n }\r\n\r\n .menu-list.open {\r\n display: flex; /* visibile quando hamburger aperto */\r\n }\r\n\r\n .menu-toggle {\r\n display: flex; /* mostra hamburger */\r\n }\r\n\r\n .desktop-only {\r\n display: none; /* nasconde actions desktop */\r\n }\r\n\r\n .mobile-only {\r\n display: flex; /* mostra actions dentro menu */\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n}\r\n\r\n/* Tablet largo (768px - 1023px) */\r\n@media (min-width: 768px) and (max-width: 1023px) {\r\n .menu-toggle {\r\n display: none; /* niente hamburger, menu normale */\r\n }\r\n\r\n .menu-list {\r\n display: flex; /* mostra link orizzontali */\r\n flex-direction: row;\r\n gap: 1.5rem;\r\n position: static;\r\n background: none;\r\n padding: 0;\r\n }\r\n\r\n .desktop-only {\r\n display: flex; /* mostra actions a destra */\r\n }\r\n\r\n .mobile-only {\r\n display: none; /* niente duplicato di actions */\r\n }\r\n}\r\n\r\n/* Desktop (≥1024px) */\r\n@media (min-width: 1024px) {\r\n .menu-toggle {\r\n display: none;\r\n }\r\n\r\n .menu-list {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 1.5rem;\r\n position: static;\r\n background: none;\r\n padding: 0;\r\n }\r\n\r\n .desktop-only {\r\n display: flex;\r\n }\r\n\r\n .mobile-only {\r\n display: none;\r\n }\r\n}\r\n";
|
|
3
3
|
module.exports = styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = ".menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n padding: 1rem
|
|
1
|
+
const styles = ".menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n /* padding: 1rem; */\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n}\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n}\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n.menu-right {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n/* Hamburger button */\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s;\r\n}\r\n\r\n/* Helpers per mostrare/nascondere blocchi */\r\n.desktop-only {\r\n display: flex; /* actions desktop */\r\n}\r\n\r\n.mobile-only {\r\n display: none; /* actions mobile dentro hamburger */\r\n}\r\n\r\n/* ------------------ Breakpoints ------------------ */\r\n\r\n/* Mobile piccolo (<768px) */\r\n@media (max-width: 767px) {\r\n .menu-list {\r\n position: absolute;\r\n top: 64px;\r\n left: 0;\r\n right: 0;\r\n background-color: white;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 1rem;\r\n padding: 1rem;\r\n display: none; /* nascosto di default */\r\n z-index: 5;\r\n }\r\n\r\n .menu-list.open {\r\n display: flex; /* visibile quando hamburger aperto */\r\n }\r\n\r\n .menu-toggle {\r\n display: flex; /* mostra hamburger */\r\n }\r\n\r\n .desktop-only {\r\n display: none; /* nasconde actions desktop */\r\n }\r\n\r\n .mobile-only {\r\n display: flex; /* mostra actions dentro menu */\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n}\r\n\r\n/* Tablet largo (768px - 1023px) */\r\n@media (min-width: 768px) and (max-width: 1023px) {\r\n .menu-toggle {\r\n display: none; /* niente hamburger, menu normale */\r\n }\r\n\r\n .menu-list {\r\n display: flex; /* mostra link orizzontali */\r\n flex-direction: row;\r\n gap: 1.5rem;\r\n position: static;\r\n background: none;\r\n padding: 0;\r\n }\r\n\r\n .desktop-only {\r\n display: flex; /* mostra actions a destra */\r\n }\r\n\r\n .mobile-only {\r\n display: none; /* niente duplicato di actions */\r\n }\r\n}\r\n\r\n/* Desktop (≥1024px) */\r\n@media (min-width: 1024px) {\r\n .menu-toggle {\r\n display: none;\r\n }\r\n\r\n .menu-list {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 1.5rem;\r\n position: static;\r\n background: none;\r\n padding: 0;\r\n }\r\n\r\n .desktop-only {\r\n display: flex;\r\n }\r\n\r\n .mobile-only {\r\n display: none;\r\n }\r\n}\r\n";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -4,5 +4,6 @@ declare const meta: Meta<NavigationMenuProps>;
|
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<NavigationMenuProps>;
|
|
6
6
|
export declare const Primary: Story;
|
|
7
|
+
export declare const Mobile: Story;
|
|
7
8
|
export declare const WithoutActions: Story;
|
|
8
9
|
export declare const Minimal: Story;
|