@sierra-95/svelte-scaffold 1.0.20 → 1.0.22

package/dist/components/Modules/Layout/Header/header.svelte

@@ -1,5 +1,5 @@
-<script>
-  import {isMobile} from '../../../../index.js';
+<script lang="ts">
+  import {buttonRipple} from '../../../../index.js';
   import GridIcon from './gridIcon.svelte';
   import './header.css';
    const {
@@ -11,16 +11,18 @@
     headerCenterContent,
     headerRightContent,
     dashboardMenuColor, 
-    dashboardMenuSize
+    dashboardMenuSize,
+    dashboardMenu,
   } = $props();
+
+  function conditionalRipple(node: HTMLElement) {
+    if (dashboardMenu) {
+      return buttonRipple(node);
+    }
+  }
 </script>
 <header id='sierra-header'>
   <div style="display: flex; align-items: center; gap: 1rem;">
-    <!-- <button aria-label="Toggle menu" style="cursor: pointer; margin-left: 0.5rem; {$isMobile ? '':'display:none;'}" onclick={toggleMenu}>
-      <div class="bar"></div>
-      <div class="bar"></div>
-      <div class="bar"></div>
-    </button> -->
     <a href={headerLink} style="display: flex; align-items: center; gap: 0.5rem; color: inherit; margin-left: 1rem;'}">
       {#if headerImage}
           <img style="--header-image-size : {headerImageSize}" src={headerImage} alt="Logo"/>
@@ -33,6 +35,14 @@
   <div>{@render headerCenterContent?.()}</div>
   <div style="display: flex; gap: 1rem; align-items: center;">
     {@render headerRightContent?.()}
-    <button onclick={toggleMenu} title="Menu" style="margin-right: 1rem;"><GridIcon {dashboardMenuColor} {dashboardMenuSize} /></button>
+    <button use:conditionalRipple onclick={toggleMenu} title="Menu" style="margin-right: 1rem;">
+      {#if dashboardMenu}
+        <GridIcon {dashboardMenuColor} {dashboardMenuSize} />
+      {:else} 
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+      {/if}
+    </button>
   </div>
 </header>

package/dist/components/Modules/Layout/Header/header.svelte.d.ts

@@ -1,8 +1,4 @@
-export default Header;
-type Header = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
+import './header.css';
 declare const Header: import("svelte").Component<{
     headerTitle: any;
     headerLink: any;
@@ -13,15 +9,7 @@ declare const Header: import("svelte").Component<{
     headerRightContent: any;
     dashboardMenuColor: any;
     dashboardMenuSize: any;
+    dashboardMenu: any;
 }, {}, "">;
-type $$ComponentProps = {
-    headerTitle: any;
-    headerLink: any;
-    headerImage: any;
-    headerImageSize: any;
-    toggleMenu?: any;
-    headerCenterContent: any;
-    headerRightContent: any;
-    dashboardMenuColor: any;
-    dashboardMenuSize: any;
-};
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/Modules/Layout/main.svelte

@@ -18,8 +18,9 @@
 		headerCenterContent = null,
 		headerRightContent = null,
 		paddingOff = false,
+		dashboardMenu = false, 
 		dashboardMenuColor = 'var(--text)',
-		dashboardMenuSize = "35px" 
+		dashboardMenuSize = "30px",
 	} = $props();
 
 
@@ -81,6 +82,7 @@
 		{headerRightContent}
 		{dashboardMenuColor}
 		{dashboardMenuSize}
+		{dashboardMenu}
 	/>
 	{#if $isLoading}<LinearProgress />{/if}
 	<div id="sierra-layout">

package/dist/components/Modules/Layout/main.svelte.d.ts

@@ -14,6 +14,7 @@ declare const Main: import("svelte").Component<{
     headerCenterContent?: any;
     headerRightContent?: any;
     paddingOff?: boolean;
+    dashboardMenu?: boolean;
     dashboardMenuColor?: string;
     dashboardMenuSize?: string;
 }, {}, "">;
@@ -28,6 +29,7 @@ type $$ComponentProps = {
     headerCenterContent?: any;
     headerRightContent?: any;
     paddingOff?: boolean;
+    dashboardMenu?: boolean;
     dashboardMenuColor?: string;
     dashboardMenuSize?: string;
 };

package/package.json

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