@functionalcms/svelte-components 5.24.9 → 5.24.10
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.
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
uiHelpers,
|
|
15
15
|
SidebarBrand
|
|
16
16
|
} from 'flowbite-svelte';
|
|
17
|
+
import { page } from '$app/state';
|
|
17
18
|
|
|
18
19
|
interface TwoColumnLayoutProps {
|
|
19
20
|
children: Snippet;
|
|
@@ -45,6 +46,10 @@
|
|
|
45
46
|
afterNavigate(() => {
|
|
46
47
|
window.scrollTo({ top: 0, behavior: 'instant' });
|
|
47
48
|
});
|
|
49
|
+
|
|
50
|
+
function isActive(path: string | null){
|
|
51
|
+
return page.url.pathname == path;
|
|
52
|
+
}
|
|
48
53
|
</script>
|
|
49
54
|
|
|
50
55
|
<main class="menu-layout relative flex h-full" bind:this={container}>
|
|
@@ -76,9 +81,9 @@
|
|
|
76
81
|
{#each menuItems as item}
|
|
77
82
|
{#if !isCollapsed}
|
|
78
83
|
{#if 'items' in item}
|
|
79
|
-
<SidebarDropdownWrapper label={item.label} isOpen={item.isOpen}>
|
|
84
|
+
<SidebarDropdownWrapper label={item.label} isOpen={item.isOpen} class={item.css}>
|
|
80
85
|
{#each item.items as subItem}
|
|
81
|
-
<SidebarItem label={subItem.label} href={subItem.href}>
|
|
86
|
+
<SidebarItem label={subItem.label} href={subItem.href} class={subItem.css} active={isActive(subItem.href)}>
|
|
82
87
|
{#snippet icon()}
|
|
83
88
|
<Icon icon={subItem.icon} />
|
|
84
89
|
{/snippet}
|
|
@@ -86,21 +91,21 @@
|
|
|
86
91
|
{/each}
|
|
87
92
|
</SidebarDropdownWrapper>
|
|
88
93
|
{:else}
|
|
89
|
-
<SidebarItem label={item.label} href={item.href}>
|
|
94
|
+
<SidebarItem label={item.label} href={item.href} class={item.css} active={isActive(item.href)}>
|
|
90
95
|
{#snippet icon()}
|
|
91
96
|
<Icon icon={item.icon} />
|
|
92
97
|
{/snippet}
|
|
93
98
|
</SidebarItem>
|
|
94
99
|
{/if}
|
|
95
100
|
{:else}
|
|
96
|
-
<SidebarItem label="" href={item.href} class="justify-center" title={item.label}>
|
|
101
|
+
<SidebarItem label="" href={item.href} class="justify-center" title={item.label} active={isActive(item.href)}>
|
|
97
102
|
{#snippet icon()}
|
|
98
103
|
<Icon icon={item.icon} />
|
|
99
104
|
{/snippet}
|
|
100
105
|
</SidebarItem>
|
|
101
106
|
{#if item.items && item.isOpen}
|
|
102
107
|
{#each item.items as subItem}
|
|
103
|
-
<SidebarItem label="" href={subItem.href}>
|
|
108
|
+
<SidebarItem label="" href={subItem.href} active={isActive(subItem.href)}>
|
|
104
109
|
{#snippet icon()}
|
|
105
110
|
<Icon icon={subItem.icon} />
|
|
106
111
|
{/snippet}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.resizable-aside {
|
|
62
|
-
--collapsed-width:
|
|
62
|
+
--collapsed-width: 3rem;
|
|
63
63
|
position: relative;
|
|
64
64
|
height: 100%;
|
|
65
65
|
background-color: #f5f5f5;
|
|
@@ -95,6 +95,20 @@
|
|
|
95
95
|
background-color: #f0f0f0;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
+
.resizable-aside.collapsed .collapse-toggle {
|
|
99
|
+
top: 0.5rem;
|
|
100
|
+
right: 0.375rem;
|
|
101
|
+
padding: 0.5rem;
|
|
102
|
+
border: 1px solid #ccc;
|
|
103
|
+
border-radius: 999px;
|
|
104
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.resizable-aside.collapsed .collapse-toggle:hover {
|
|
108
|
+
background-color: #f0f0f0;
|
|
109
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
110
|
+
}
|
|
111
|
+
|
|
98
112
|
.resizable-main {
|
|
99
113
|
flex: 1;
|
|
100
114
|
height: 100%;
|
|
@@ -8,19 +8,14 @@ export type MenuItem = {
|
|
|
8
8
|
label: string;
|
|
9
9
|
href?: string;
|
|
10
10
|
icon?: string;
|
|
11
|
-
|
|
11
|
+
css?: string;
|
|
12
12
|
};
|
|
13
|
-
export type MenuSection = {
|
|
14
|
-
label: string;
|
|
13
|
+
export type MenuSection = MenuItem & {
|
|
15
14
|
items: MenuItem[];
|
|
16
|
-
href?: string;
|
|
17
|
-
icon?: string;
|
|
18
|
-
visibility?: Visibility;
|
|
19
15
|
isOpen?: boolean;
|
|
20
16
|
};
|
|
21
17
|
export type MenuDivider = {};
|
|
22
|
-
export type MenuOption = MenuItem | MenuSection;
|
|
23
|
-
export declare function selectVisible(pages: Array<MenuItem>, visibility: Visibility): MenuItem[];
|
|
18
|
+
export type MenuOption = MenuItem | MenuSection | MenuDivider;
|
|
24
19
|
export declare function isSelected(includeSubpagesForSelect: boolean, page: any, item: MenuItem): any;
|
|
25
20
|
export declare const defaultCss: {
|
|
26
21
|
buttonCss: never[];
|
|
@@ -4,10 +4,13 @@ export var Visibility;
|
|
|
4
4
|
Visibility[Visibility["Authenticated"] = 1] = "Authenticated";
|
|
5
5
|
Visibility[Visibility["NotAuthenticated"] = 2] = "NotAuthenticated";
|
|
6
6
|
})(Visibility || (Visibility = {}));
|
|
7
|
-
export function selectVisible(pages
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
// export function selectVisible(pages: Array<MenuItem>, visibility: Visibility) {
|
|
8
|
+
// return pages.filter(
|
|
9
|
+
// (page) =>
|
|
10
|
+
// page?.visibility === Visibility.Always ||
|
|
11
|
+
// page?.visibility === visibility,
|
|
12
|
+
// )
|
|
13
|
+
// }
|
|
11
14
|
export function isSelected(includeSubpagesForSelect, page, item) {
|
|
12
15
|
if (page?.url?.pathname === '/') {
|
|
13
16
|
return page?.url?.pathname === item.href;
|