@sierra-95/svelte-scaffold 1.0.78 → 1.0.79

package/dist/Modules/Layout/Menu/menu.svelte

@@ -7,7 +7,6 @@
 
 	export let toggleMenu: () => void;
 	export let closeMobileMenu: () => void;
-	export let isMenuOpen: boolean;
 
 	$: sections = filterSectionsByRole(
 		$layoutStore.sections,
@@ -27,7 +26,7 @@
 	let openSubsections = new Set();
 
 	function toggleSubsection(id: string) {
-		if (!isMenuOpen){
+		if (!$layoutStore.isMenuOpen){
 			toggleMenu();
 			if(openSubsections.has(id)) return;
 		}
@@ -74,12 +73,12 @@
 </script>
 <nav id="sierra-menu">
 	<div class="sierra-menu-global-search">
-		<GlobalSearch {sections} iconMode={!isMenuOpen} onClose={closeMobileMenu} />
+		<GlobalSearch {sections} iconMode={!$layoutStore.isMenuOpen} onClose={closeMobileMenu} />
 	</div>
 	{#each sections.filter(section => !section.hidden) as section, i}
 		{#if section.label}
 			<div style="width: 80%;">
-				<h3 style="font-size:small; {isMenuOpen? '':'display:none;'}">{section.label}</h3>
+				<h3 style="font-size:small; {$layoutStore.isMenuOpen? '':'display:none;'}">{section.label}</h3>
 				<hr/>
 			</div>
 		{/if}
@@ -94,27 +93,27 @@
 						closeMobileMenu();
 					}
 				}}
-				style="{isMenuOpen? '':'border-radius: unset;border-left: none;'}; --menu-active-icon-color: {$layoutStore.menuActiveIconColor};"
+				style="{$layoutStore.isMenuOpen? '':'border-radius: unset;border-left: none;'}; --menu-active-icon-color: {$layoutStore.menuActiveIconColor};"
 				class={`
 					icon-base
 					${
 						item.children
-							? (!isMenuOpen && isParentActive(item, page.url.pathname) ? 'icon-active' : '')
+							? (!$layoutStore.isMenuOpen && isParentActive(item, page.url.pathname) ? 'icon-active' : '')
 							: (isParentActive(item, page.url.pathname) ? 'icon-active' : '')
 					}
 				`}
 
 			>
 				<i class={item.icon}></i>
-				<h3 style="{isMenuOpen ? '':'display:none'}">{item.label}</h3>
+				<h3 style="{$layoutStore.isMenuOpen ? '':'display:none'}">{item.label}</h3>
 				{#if item.children}
 					<i
 						class={`fa fa-chevron-right ${openSubsections.has(item.id) ? 'active' : ''}`}
-						style="position: absolute; right: 10px; font-size: 12px; {isMenuOpen ? '':'display:none'}"
+						style="position: absolute; right: 10px; font-size: 12px; {$layoutStore.isMenuOpen ? '':'display:none'}"
 					></i>
 				{/if}
 			</a>
-			{#if item.children && openSubsections.has(item.id) && isMenuOpen}
+			{#if item.children && openSubsections.has(item.id) && $layoutStore.isMenuOpen}
 				<div style="width: 75%; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px">
 					{#each item.children as child}
 						<a
@@ -127,7 +126,7 @@
 							`}
 							style="margin-left: 10px"
 						>
-							<h3 style="{isMenuOpen ? '':'display:none'}">
+							<h3 style="{$layoutStore.isMenuOpen ? '':'display:none'}">
 								{child.label}
 							</h3>
 						</a>

package/dist/Modules/Layout/Menu/menu.svelte.d.ts

@@ -15,7 +15,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const Menu: $$__sveltets_2_IsomorphicComponent<{
     toggleMenu: () => void;
     closeMobileMenu: () => void;
-    isMenuOpen: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/Modules/Layout/collapse.svelte

@@ -1,9 +1,10 @@
 <script>
-    export let isMenuOpen;
+    import { layoutStore } from "../../index.js";
+    
     export let toggleMenu;
 </script>
 <div class="menu-collapse">
-    <button on:click={toggleMenu} aria-label="Collapse Menu" title="{isMenuOpen? 'Close Menu':'Open Menu'}">
+    <button on:click={toggleMenu} aria-label="Collapse Menu" title="{$layoutStore.isMenuOpen? 'Close Menu':'Open Menu'}">
         <svg
         width="30"
         height="30"
@@ -15,7 +16,7 @@
         stroke-linejoin="round"
         aria-hidden="true"
         focusable="false"
-        style="transform: {isMenuOpen? 'scaleX(1)': 'scaleX(-1)'}; flexShrink: 0"
+        style="transform: {$layoutStore.isMenuOpen? 'scaleX(1)': 'scaleX(-1)'}; flexShrink: 0"
         >
         <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
         <path d="M9 4v16" />

package/dist/Modules/Layout/collapse.svelte.d.ts

@@ -1,6 +1,5 @@
 export default Collapse;
 type Collapse = SvelteComponent<{
-    isMenuOpen: any;
     toggleMenu: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -8,7 +7,6 @@ type Collapse = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const Collapse: $$__sveltets_2_IsomorphicComponent<{
-    isMenuOpen: any;
     toggleMenu: any;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/Modules/Layout/main.svelte

@@ -12,11 +12,10 @@
 	} = $props();
 
 	let isSmallscreen = $state(true);
-	let isMenuOpen = $state(false);
 
 	$effect(() => {
 		isSmallscreen = $isMobile || $isTablet;
-		if (isSmallscreen) isMenuOpen = false;
+		if (isSmallscreen) $layoutStore.isMenuOpen = false;
 		if ($theme){
 			document.body.setAttribute('data-theme', $theme);
 			localStorage.setItem('theme', $theme);
@@ -29,9 +28,9 @@
 				const stored = localStorage.getItem('isMenuOpen');
 				if (stored === null) {
 					localStorage.setItem('isMenuOpen', 'true');
-					isMenuOpen = true;
+					$layoutStore.isMenuOpen = true;
 				} else {
-					isMenuOpen = stored === 'true';
+					$layoutStore.isMenuOpen = stored === 'true';
 				}
 			}
 			const storedTheme = localStorage.getItem('theme');
@@ -47,14 +46,14 @@
 	});
 
 	const toggleMenu = () => {
-		isMenuOpen = !isMenuOpen;
+		$layoutStore.isMenuOpen = !$layoutStore.isMenuOpen;
 		if(isSmallscreen) return;
 		if (typeof localStorage !== 'undefined') {
-			localStorage.setItem('isMenuOpen', isMenuOpen.toString());
+			localStorage.setItem('isMenuOpen', $layoutStore.isMenuOpen.toString());
 		}
 	};
 	const closeMobileMenu = () => {
-		if (isSmallscreen && isMenuOpen) isMenuOpen = false;
+		if (isSmallscreen && $layoutStore.isMenuOpen) $layoutStore.isMenuOpen = false;
 	};
 </script>
 
@@ -70,16 +69,15 @@
 			data-label="Menu Container"
 			style={
 				isSmallscreen
-				? `width:300px; transform: translateX(${isMenuOpen ? '0%' : '-100%'}); transition: transform 0.3s ease; position: fixed; left: 0; padding-bottom: 50px`
-				: `width: ${isMenuOpen ? '300px' : '70px'}; transition: width 0.3s ease;`
+				? `width:300px; transform: translateX(${ $layoutStore.isMenuOpen ? '0%' : '-100%'}); transition: transform 0.3s ease; position: fixed; left: 0; padding-bottom: 50px`
+				: `width: ${$layoutStore.isMenuOpen ? '300px' : '70px'}; transition: width 0.3s ease;`
 			}
 		>
 		<Menu 
-			{isMenuOpen} 
 			{toggleMenu}
 			{closeMobileMenu} 
 		/>
-		<Collapse {isMenuOpen} {toggleMenu}/>
+		<Collapse {toggleMenu}/>
 		</div>
 		<div data-label="Content Container" class="content" role="none" onclick={closeMobileMenu} style={$layoutStore.paddingOff ? 'padding: 0px;' : 'padding: 20px'}>
 			<Background />

package/dist/stores/modules/layout.d.ts

@@ -15,6 +15,7 @@ export type Section = {
     items: SectionItem[];
 };
 export type LayoutState = {
+    isMenuOpen: boolean;
     headerTitle: string;
     headerTitleColor?: string;
     headerTitleFont?: string;

package/dist/stores/modules/layout.js

@@ -1,5 +1,6 @@
 import { writable } from 'svelte/store';
 const defaultLayoutState = {
+    isMenuOpen: false,
     headerTitle: '',
     headerTitleColor: 'inherit',
     headerTitleFont: 'inherit',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.0.78",
+	"version": "1.0.79",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",