@greghowe79/the-lib 2.1.3 → 2.1.5
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/hero/styles.css.qwik.cjs +1 -1
- package/lib/components/hero/styles.css.qwik.mjs +1 -1
- package/lib/components/navigationmenu/NavigationMenu.qwik.cjs +84 -85
- package/lib/components/navigationmenu/NavigationMenu.qwik.mjs +84 -85
- package/lib-types/components/navigationmenu/NavigationMenu.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const styles = "/* .hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\nh1 {\r\n margin: 0;\r\n}\r\n\r\n.hero {\r\n /* font-family: 'Roboto Condensed', sans-serif; */\r\n /* background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem; */\r\n margin: 0 1.75rem;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\n.hero-grid {\r\n display: grid;\r\n grid-column-gap: 1.75rem;\r\n grid-template-columns: repeat(4, minmax(0.313rem, 1fr));\r\n}\r\n\r\n.hero-grid .hero-grid__col--span-4-sm {\r\n display: block;\r\n grid-column-end: span 4;\r\n}\r\n\r\n.ion-hero-2up {\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.875rem;\r\n justify-content: space-between;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.hero-2up__left-area {\r\n flex: 1.5;\r\n max-width: 100%;\r\n}\r\n\r\n.hero-2up__right-area {\r\n flex: 1;\r\n max-width: 28.375rem;\r\n width: 100%;\r\n}\r\n\r\n.headline-1,\r\n.content {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.headline-1 {\r\n font-size: 2.25rem;\r\n line-height: 1.2222222222;\r\n font-weight: 400;\r\n letter-spacing: -0.25px;\r\n margin-bottom: 1rem;\r\n overflow-wrap: anywhere;\r\n color: #333;\r\n}\r\n\r\n.hero_title {\r\n font-weight: 700;\r\n}\r\n\r\n.content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n}\r\n\r\n/* .hero h1 {\r\n font-size: calc(1rem * 3);\r\n\r\n color: #333;\r\n} */\r\n\r\n/* @media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\n@media (min-width: 600px) {\r\n .hero-2up__right-area {\r\n min-width: 19.375rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3rem;\r\n line-height: 1.1666666667;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 2.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 40px;\r\n grid-template-columns: repeat(12, minmax(0.313rem, 1fr));\r\n }\r\n\r\n .span-1-md {\r\n display: block;\r\n grid-column-end: span 1;\r\n }\r\n\r\n .span-10-md {\r\n display: block;\r\n grid-column-end: span 10;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 4.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 3rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n flex-direction: row;\r\n text-align: start;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .hero-2up__left-area {\r\n max-width: 35.438rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n gap: 3.125rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n";
|
|
2
|
+
const styles = "/* .hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\nh1 {\r\n margin: 0;\r\n}\r\n\r\n.hero {\r\n /* font-family: 'Roboto Condensed', sans-serif; */\r\n /* background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem; */\r\n margin: 0 1.75rem;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\n.hero-grid {\r\n display: grid;\r\n grid-column-gap: 1.75rem;\r\n grid-template-columns: repeat(4, minmax(0.313rem, 1fr));\r\n}\r\n\r\n.hero-grid .hero-grid__col--span-4-sm {\r\n display: block;\r\n grid-column-end: span 4;\r\n}\r\n\r\n.ion-hero-2up {\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.875rem;\r\n justify-content: space-between;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.hero-2up__left-area {\r\n flex: 1.5;\r\n max-width: 100%;\r\n}\r\n\r\n.hero-2up__right-area {\r\n flex: 1;\r\n max-width: 28.375rem;\r\n width: 100%;\r\n}\r\n\r\n.headline-1,\r\n.content {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.headline-1 {\r\n font-size: 2.25rem;\r\n line-height: 1.2222222222;\r\n font-weight: 400;\r\n letter-spacing: -0.25px;\r\n margin-bottom: 1rem;\r\n overflow-wrap: anywhere;\r\n color: #333;\r\n}\r\n\r\n.hero_title {\r\n font-weight: 700;\r\n}\r\n\r\n.content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n}\r\n\r\n/* .hero h1 {\r\n font-size: calc(1rem * 3);\r\n\r\n color: #333;\r\n} */\r\n\r\n/* @media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\n/* Span su tutte le colonne per mobile */\r\n.span-10-md,\r\n.span-1-md {\r\n grid-column: 1 / -1; /* Spanna tutte le colonne */\r\n}\r\n\r\n@media (min-width: 600px) {\r\n .hero-2up__right-area {\r\n min-width: 19.375rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3rem;\r\n line-height: 1.1666666667;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 2.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 40px;\r\n grid-template-columns: repeat(12, minmax(0.313rem, 1fr));\r\n }\r\n\r\n .span-1-md {\r\n display: block;\r\n grid-column-end: span 1;\r\n }\r\n\r\n .span-10-md {\r\n display: block;\r\n grid-column-end: span 10;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 4.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 3rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n flex-direction: row;\r\n text-align: start;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .hero-2up__left-area {\r\n max-width: 35.438rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n gap: 3.125rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n";
|
|
3
3
|
module.exports = styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = "/* .hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\nh1 {\r\n margin: 0;\r\n}\r\n\r\n.hero {\r\n /* font-family: 'Roboto Condensed', sans-serif; */\r\n /* background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem; */\r\n margin: 0 1.75rem;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\n.hero-grid {\r\n display: grid;\r\n grid-column-gap: 1.75rem;\r\n grid-template-columns: repeat(4, minmax(0.313rem, 1fr));\r\n}\r\n\r\n.hero-grid .hero-grid__col--span-4-sm {\r\n display: block;\r\n grid-column-end: span 4;\r\n}\r\n\r\n.ion-hero-2up {\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.875rem;\r\n justify-content: space-between;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.hero-2up__left-area {\r\n flex: 1.5;\r\n max-width: 100%;\r\n}\r\n\r\n.hero-2up__right-area {\r\n flex: 1;\r\n max-width: 28.375rem;\r\n width: 100%;\r\n}\r\n\r\n.headline-1,\r\n.content {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.headline-1 {\r\n font-size: 2.25rem;\r\n line-height: 1.2222222222;\r\n font-weight: 400;\r\n letter-spacing: -0.25px;\r\n margin-bottom: 1rem;\r\n overflow-wrap: anywhere;\r\n color: #333;\r\n}\r\n\r\n.hero_title {\r\n font-weight: 700;\r\n}\r\n\r\n.content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n}\r\n\r\n/* .hero h1 {\r\n font-size: calc(1rem * 3);\r\n\r\n color: #333;\r\n} */\r\n\r\n/* @media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\n@media (min-width: 600px) {\r\n .hero-2up__right-area {\r\n min-width: 19.375rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3rem;\r\n line-height: 1.1666666667;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 2.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 40px;\r\n grid-template-columns: repeat(12, minmax(0.313rem, 1fr));\r\n }\r\n\r\n .span-1-md {\r\n display: block;\r\n grid-column-end: span 1;\r\n }\r\n\r\n .span-10-md {\r\n display: block;\r\n grid-column-end: span 10;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 4.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 3rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n flex-direction: row;\r\n text-align: start;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .hero-2up__left-area {\r\n max-width: 35.438rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n gap: 3.125rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n";
|
|
1
|
+
const styles = "/* .hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\nh1 {\r\n margin: 0;\r\n}\r\n\r\n.hero {\r\n /* font-family: 'Roboto Condensed', sans-serif; */\r\n /* background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem; */\r\n margin: 0 1.75rem;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\n.hero-grid {\r\n display: grid;\r\n grid-column-gap: 1.75rem;\r\n grid-template-columns: repeat(4, minmax(0.313rem, 1fr));\r\n}\r\n\r\n.hero-grid .hero-grid__col--span-4-sm {\r\n display: block;\r\n grid-column-end: span 4;\r\n}\r\n\r\n.ion-hero-2up {\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.875rem;\r\n justify-content: space-between;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.hero-2up__left-area {\r\n flex: 1.5;\r\n max-width: 100%;\r\n}\r\n\r\n.hero-2up__right-area {\r\n flex: 1;\r\n max-width: 28.375rem;\r\n width: 100%;\r\n}\r\n\r\n.headline-1,\r\n.content {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.headline-1 {\r\n font-size: 2.25rem;\r\n line-height: 1.2222222222;\r\n font-weight: 400;\r\n letter-spacing: -0.25px;\r\n margin-bottom: 1rem;\r\n overflow-wrap: anywhere;\r\n color: #333;\r\n}\r\n\r\n.hero_title {\r\n font-weight: 700;\r\n}\r\n\r\n.content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n}\r\n\r\n/* .hero h1 {\r\n font-size: calc(1rem * 3);\r\n\r\n color: #333;\r\n} */\r\n\r\n/* @media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\n/* Span su tutte le colonne per mobile */\r\n.span-10-md,\r\n.span-1-md {\r\n grid-column: 1 / -1; /* Spanna tutte le colonne */\r\n}\r\n\r\n@media (min-width: 600px) {\r\n .hero-2up__right-area {\r\n min-width: 19.375rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3rem;\r\n line-height: 1.1666666667;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 2.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 40px;\r\n grid-template-columns: repeat(12, minmax(0.313rem, 1fr));\r\n }\r\n\r\n .span-1-md {\r\n display: block;\r\n grid-column-end: span 1;\r\n }\r\n\r\n .span-10-md {\r\n display: block;\r\n grid-column-end: span 10;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 4.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 3rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n flex-direction: row;\r\n text-align: start;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .hero-2up__left-area {\r\n max-width: 35.438rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n gap: 3.125rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -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>;
|