@functionalcms/svelte-components 4.2.7 → 4.2.9
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.
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { Placement } from '../Styling.js';
|
|
6
6
|
import Button from '../form/Button.svelte';
|
|
7
7
|
import Drawer from '../presentation/Drawer.svelte';
|
|
8
|
-
import
|
|
8
|
+
import ListMenu from './ListMenu.svelte';
|
|
9
9
|
|
|
10
10
|
interface Css {
|
|
11
11
|
buttonCss: string;
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
link: string;
|
|
14
14
|
}
|
|
15
15
|
interface Props {
|
|
16
|
-
css
|
|
17
|
-
noBorder
|
|
18
|
-
placement
|
|
16
|
+
css: Partial<Css>;
|
|
17
|
+
noBorder: boolean;
|
|
18
|
+
placement: Placement;
|
|
19
19
|
localPages: Array<HeaderNavigationItem>;
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -23,14 +23,13 @@
|
|
|
23
23
|
localPages = [],
|
|
24
24
|
css = { buttonCss: '', container: '', link: '' },
|
|
25
25
|
placement = Placement.Start
|
|
26
|
-
}: Props = $props();
|
|
26
|
+
}: Partial<Props> = $props();
|
|
27
27
|
|
|
28
28
|
let isOpen = $state(false);
|
|
29
|
-
let buttonCss = $derived(cn('hamburger-handle', css.buttonCss));
|
|
29
|
+
let buttonCss = $derived(cn('hamburger-handle', css.buttonCss ?? ''));
|
|
30
30
|
|
|
31
31
|
$inspect(isOpen);
|
|
32
32
|
function toggleDrawer(){
|
|
33
|
-
console.log('clicked');
|
|
34
33
|
isOpen = !isOpen;
|
|
35
34
|
}
|
|
36
35
|
</script>
|
|
@@ -45,12 +44,19 @@
|
|
|
45
44
|
</Button>
|
|
46
45
|
|
|
47
46
|
<Drawer {placement} open={isOpen} clickAway={() => isOpen != isOpen}>
|
|
48
|
-
<
|
|
49
|
-
|
|
47
|
+
<Button css="close" onclick={() => isOpen = false}>X</Button>
|
|
48
|
+
<ListMenu {localPages} {css}>
|
|
49
|
+
</ListMenu>
|
|
50
50
|
</Drawer>
|
|
51
51
|
|
|
52
52
|
<style>
|
|
53
53
|
:global(#hamburger-menu) {
|
|
54
54
|
z-index: 10001;
|
|
55
55
|
}
|
|
56
|
+
:global(.btn.close){
|
|
57
|
+
position: fixed;
|
|
58
|
+
top: var(--hamburger-menu-margin, 25px);
|
|
59
|
+
right: var(--hamburger-menu-margin, 25px);
|
|
60
|
+
}
|
|
56
61
|
</style>
|
|
62
|
+
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import { HeaderNavigationItem } from './types.js';
|
|
2
2
|
import { Placement } from '../Styling.js';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
placement?: Placement;
|
|
3
|
+
declare const HamburgerMenu: import("svelte").Component<Partial<{
|
|
4
|
+
css: Partial<{
|
|
5
|
+
buttonCss: string;
|
|
6
|
+
container: string;
|
|
7
|
+
link: string;
|
|
8
|
+
}>;
|
|
9
|
+
noBorder: boolean;
|
|
10
|
+
placement: Placement;
|
|
12
11
|
localPages: Array<HeaderNavigationItem>;
|
|
13
|
-
}
|
|
14
|
-
declare const HamburgerMenu: import("svelte").Component<Props, {}, "">;
|
|
12
|
+
}>, {}, "">;
|
|
15
13
|
type HamburgerMenu = ReturnType<typeof HamburgerMenu>;
|
|
16
14
|
export default HamburgerMenu;
|
|
@@ -36,11 +36,6 @@
|
|
|
36
36
|
function handleClickAway() {
|
|
37
37
|
clickAway();
|
|
38
38
|
}
|
|
39
|
-
|
|
40
|
-
// onMount(() => {
|
|
41
|
-
// mounted = true;
|
|
42
|
-
// scrollLock(open);
|
|
43
|
-
// });
|
|
44
39
|
</script>
|
|
45
40
|
|
|
46
41
|
<aside class="drawer" class:open {style}>
|
|
@@ -55,7 +50,7 @@
|
|
|
55
50
|
|
|
56
51
|
<style>
|
|
57
52
|
.drawer {
|
|
58
|
-
position:
|
|
53
|
+
position: absolute;
|
|
59
54
|
top: 0;
|
|
60
55
|
left: 0;
|
|
61
56
|
height: 100%;
|
|
@@ -63,6 +58,7 @@
|
|
|
63
58
|
z-index: -1;
|
|
64
59
|
transition: z-index var(--duration) step-end;
|
|
65
60
|
display: none;
|
|
61
|
+
padding: var(--hamburger-menu-margin, 25px);
|
|
66
62
|
}
|
|
67
63
|
|
|
68
64
|
.drawer.open {
|