@sierra-95/svelte-scaffold 1.0.54 → 1.0.56

package/dist/Core/components/Form/Button/Hamburger/hamburger.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    const {
+        barWidth = "30px",
+        barHeight = "3px",
+        barColor = "black",
+        barBorderRadius = "5px",
+        barSpacing = "5px",
+        ...rest
+    } = $props();
+</script>
+
+<button id="sierra-hamburger" style="gap: {barSpacing};"
+    onclick={(e: MouseEvent) => {
+		rest.onclick?.(e);
+	}} 
+    aria-label="Menu">
+    <div class="bar" style="width: {barWidth}; height: {barHeight}; background-color: {barColor}; border-radius: {barBorderRadius};" ></div>
+    <div class="bar" style="width: {barWidth}; height: {barHeight}; background-color: {barColor}; border-radius: {barBorderRadius};" ></div>
+    <div class="bar" style="width: {barWidth}; height: {barHeight}; background-color: {barColor}; border-radius: {barBorderRadius};" ></div>
+</button>
+
+<style>
+    #sierra-hamburger{
+        display: flex;
+        flex-direction: column;
+    }
+    #sierra-hamburger .bar {
+        transition: all 0.3s ease;
+    }
+    #sierra-hamburger:hover .bar:nth-of-type(1) {
+        -webkit-transform: translateY(1.5px) rotate(-4.5deg);
+        -ms-transform: translateY(1.5px) rotate(-4.5deg);
+        transform: translateY(1.5px) rotate(-4.5deg);
+    }
+
+    #sierra-hamburger:hover .bar:nth-of-type(3) {
+        -webkit-transform: translateY(-1.5px) rotate(4.5deg);
+        -ms-transform: translateY(-1.5px) rotate(4.5deg);
+        transform: translateY(-1.5px) rotate(4.5deg);
+    }
+</style>

package/dist/Core/components/Form/Button/Hamburger/hamburger.svelte.d.ts

@@ -0,0 +1,9 @@
+declare const Hamburger: import("svelte").Component<{
+    barWidth?: string;
+    barHeight?: string;
+    barColor?: string;
+    barBorderRadius?: string;
+    barSpacing?: string;
+} & Record<string, any>, {}, "">;
+type Hamburger = ReturnType<typeof Hamburger>;
+export default Hamburger;

package/dist/Core/components/Form/Button/times/times.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
+    type _iconPrefix = 'fa-solid' | 'fa-regular';
+    type _icon = 'fa-circle-xmark' | 'fa-xmark';
     const {
         vertical = 'top',
         horizontal = 'right',
+        absolute = true,
+        iconPrefix = 'fa-regular' as _iconPrefix,
+        icon = 'fa-circle-xmark' as _icon,
+        iconSize = '16px',
         ...rest
     } = $props();
 </script>
@@ -18,8 +24,8 @@
     onclick={(e: MouseEvent) => {
 		rest.onclick?.(e);
 	}}
-    style="position: absolute; {vertical}: 0; {horizontal}: 0;"
+    style={absolute ? `position: absolute; ${vertical}: 0; ${horizontal}: 0;` : ``}
     aria-label="Times Button" 
-    class={vertical === 'top' ? 'sierra-times-top' : 'sierra-times-bottom'}
-><i class="fa fa-times-circle"></i>
+    class={absolute ? (vertical === 'top' ? 'sierra-times-top' : 'sierra-times-bottom') : ''}
+><i class={`${iconPrefix} ${icon}`} style={`font-size: ${iconSize};`}></i>
 </button>

package/dist/Core/components/Form/Button/times/times.svelte.d.ts

@@ -1,6 +1,10 @@
 declare const Times: import("svelte").Component<{
     vertical?: string;
     horizontal?: string;
+    absolute?: boolean;
+    iconPrefix?: "fa-solid" | "fa-regular";
+    icon?: "fa-circle-xmark" | "fa-xmark";
+    iconSize?: string;
 } & Record<string, any>, {}, "">;
 type Times = ReturnType<typeof Times>;
 export default Times;

package/dist/Core/components/Menus/Hamburger/hamburger.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import {ButtonHamburger, ButtonTimes} from '../../../../index.js';
+    import { fly } from 'svelte/transition';
+
+
+    let {
+        barWidth = "30px",
+        barHeight = "3px",
+        barColor = "black",
+        barBorderRadius = "5px",
+        barSpacing = "5px",
+        menuTextColor = "black",
+        menuBackgroundColor = "white",
+        zIndex = 40,
+        menuOpen = $bindable(false),
+        children = null,
+    } = $props();
+
+    function toggleMenu() {
+        menuOpen = !menuOpen;
+    }
+</script>
+
+<ButtonHamburger
+    {barWidth}
+    {barHeight}
+    {barColor}
+    {barBorderRadius}
+    {barSpacing}
+    onclick={toggleMenu}
+/>
+
+{#if menuOpen}
+    <div
+        id="sierra-hamburger-menu"
+        in:fly={{ y: -100, duration: 300 }}
+        out:fly={{ y: -100, duration: 300 }}
+        style="background-color: {menuBackgroundColor}; color: {menuTextColor}; z-index: {zIndex};"
+    >
+        <div style="height: 40px; padding-right: 20px; display: flex; align-items: flex-end; justify-content: flex-end;">
+            <ButtonTimes absolute={false} iconSize="18px" onclick={toggleMenu}/>
+        </div>
+        {@render children?.()}
+    </div>
+{/if}
+
+<style>
+    #sierra-hamburger-menu{
+        position: fixed; 
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+</style>

package/dist/Core/components/Menus/Hamburger/hamburger.svelte.d.ts

@@ -0,0 +1,14 @@
+declare const Hamburger: import("svelte").Component<{
+    barWidth?: string;
+    barHeight?: string;
+    barColor?: string;
+    barBorderRadius?: string;
+    barSpacing?: string;
+    menuTextColor?: string;
+    menuBackgroundColor?: string;
+    zIndex?: number;
+    menuOpen?: boolean;
+    children?: any;
+}, {}, "menuOpen">;
+type Hamburger = ReturnType<typeof Hamburger>;
+export default Hamburger;

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { default as ButtonSwipe } from './Core/components/Form/Button/Swipe/butt
 export { default as ButtonTheme } from './Core/components/Form/Button/theme/theme.svelte';
 export { default as ButtonTimes } from './Core/components/Form/Button/times/times.svelte';
 export { default as ButtonSelect } from './Core/components/Form/Button/select/select.svelte';
+export { default as ButtonHamburger } from './Core/components/Form/Button/Hamburger/hamburger.svelte';
 export { default as Input } from './Core/components/Form/Input/input/input.svelte';
 export { default as PasswordInput } from './Core/components/Form/Input/password/password.svelte';
 export { default as Select } from './Core/components/Form/Input/select/select.svelte';
@@ -27,6 +28,7 @@ export { default as SiteUnderMaintenance } from './Core/components/Alerts/site-u
 export { default as MenuItem } from './Core/components/Menus/MenuItem/menuItem.svelte';
 export { default as DropdownContainer } from './Core/components/Menus/DropdownContainer/dropdown.svelte';
 export { default as Tabs } from './Core/components/Menus/Tabs/main.svelte';
+export { default as HamburgerMenu } from './Core/components/Menus/Hamburger/hamburger.svelte';
 export { default as Time } from './Core/components/others/Calender/Time/time.svelte';
 export { default as Date } from './Core/components/others/Calender/Date/date.svelte';
 export { default as Hr } from './Core/components/Form/Hr/hr.svelte';

package/dist/index.js

@@ -12,6 +12,7 @@ export { default as ButtonSwipe } from './Core/components/Form/Button/Swipe/butt
 export { default as ButtonTheme } from './Core/components/Form/Button/theme/theme.svelte';
 export { default as ButtonTimes } from './Core/components/Form/Button/times/times.svelte';
 export { default as ButtonSelect } from './Core/components/Form/Button/select/select.svelte';
+export { default as ButtonHamburger } from './Core/components/Form/Button/Hamburger/hamburger.svelte';
 //Inputs
 export { default as Input } from './Core/components/Form/Input/input/input.svelte';
 export { default as PasswordInput } from './Core/components/Form/Input/password/password.svelte';
@@ -34,6 +35,7 @@ export { default as SiteUnderMaintenance } from './Core/components/Alerts/site-u
 export { default as MenuItem } from './Core/components/Menus/MenuItem/menuItem.svelte';
 export { default as DropdownContainer } from './Core/components/Menus/DropdownContainer/dropdown.svelte';
 export { default as Tabs } from './Core/components/Menus/Tabs/main.svelte';
+export { default as HamburgerMenu } from './Core/components/Menus/Hamburger/hamburger.svelte';
 //others
 export { default as Time } from './Core/components/others/Calender/Time/time.svelte';
 export { default as Date } from './Core/components/others/Calender/Date/date.svelte';

package/package.json

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