added new "Arrow" burger menu animation

MikhaD · May 4, 2024 · a589bb4 · a589bb4
1 parent a22edc3
commit a589bb4
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 16 deletions.
diff --git a/src/components/Burger Menus/Arrow.svelte b/src/components/Burger Menus/Arrow.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { DIRECTION } from "./enums";
+
+	export let open = false;
+	export let duration = 0.5;
+	export let direction = DIRECTION.LEFT;
+</script>
+
+<svg
+	role="button"
+	tabindex="-1"
+	viewBox="0 0 100 100"
+	on:click={() => (open = !open)}
+	on:keypress={() => (open = !open)}
+	style:--duration="{duration}s"
+	style:--direction="{direction}deg"
+>
+	<g class:open>
+		<path />
+	</g>
+</svg>
+
+<style lang="scss">
+	svg {
+		cursor: pointer;
+		fill: none;
+		outline: transparent;
+		transform: rotate(var(--direction));
+	}
+	g {
+		transform-origin: center;
+	}
+	path {
+		stroke-linecap: round;
+		d: path("M8 18L92 18M8 50H92M8 82L92 82");
+		stroke: currentcolor;
+		stroke-width: 16;
+	}
+	.open {
+		transform: rotate(180deg);
+		path {
+			d: path("M60 18L92 50M8 50H92M60 82L92 50");
+		}
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		g,
+		path {
+			transition: var(--duration);
+		}
+	}
+</style>
diff --git a/src/components/Burger Menus/Cross.svelte b/src/components/Burger Menus/Cross.svelte
@@ -1,13 +1,6 @@
-<script context="module">
-	export const DIRECTION = {
-		LEFT: 0,
-		UP: 90,
-		RIGHT: 180,
-		DOWN: 270,
-	};
-</script>
-
 <script lang="ts">
+	import { DIRECTION } from "./enums";
+
 	export let open = false;
 	export let duration = 0.5;
 	export let direction = DIRECTION.LEFT;

diff --git a/src/components/Burger Menus/enums.ts b/src/components/Burger Menus/enums.ts
@@ -0,0 +1,6 @@
+export const DIRECTION = {
+	LEFT: 0,
+	UP: 90,
+	RIGHT: 180,
+	DOWN: 270,
+};
diff --git a/src/components/Burger Menus/index.ts b/src/components/Burger Menus/index.ts
@@ -2,4 +2,6 @@ export { default as Circle } from "./Circle.svelte";
 export { default as Cross } from "./Cross.svelte";
 export { default as FoldIn } from "./FoldIn.svelte";
 export { default as Merge } from "./Merge.svelte";
-export { default as MergeCross } from "./MergeCross.svelte";
+export { default as MergeCross } from "./MergeCross.svelte";
+export { default as Arrow } from "./Arrow.svelte";
+export { DIRECTION } from "./enums";
diff --git a/src/stories/components/BurgerMenus.story.svelte b/src/stories/components/BurgerMenus.story.svelte
@@ -2,7 +2,6 @@
 	import type { Hst } from "@histoire/plugin-svelte";
 
 	import * as Menu from "../../components/Burger Menus";
-	import { DIRECTION } from "../../components/Burger Menus/Cross.svelte";
 
 	export let Hst: Hst;
 
@@ -11,7 +10,7 @@
 
 	let cross_open = false;
 	let cross_duration = 0.5;
-	let str_cross_direction = String(DIRECTION.LEFT);
+	let str_cross_direction = String(Menu.DIRECTION.LEFT);
 	$: cross_direction = Number(str_cross_direction);
 
 	let foldIn_open = false;
@@ -22,6 +21,11 @@
 
 	let mergeCross_open = false;
 	let mergeCross_duration = 0.5;
+
+	let arrow_open = false;
+	let arrow_duration = 0.5;
+	let str_arrow_direction = String(Menu.DIRECTION.LEFT);
+	$: arrow_direction = Number(str_arrow_direction);
 </script>
 
 <Hst.Story title="Components/Burger Menus" icon="material-symbols:menu" layout={{ type: "grid" }}>
@@ -45,10 +49,10 @@
 			<Hst.ButtonGroup
 				title="Direction"
 				options={[
-					{ label: "Left", value: String(DIRECTION.LEFT) },
-					{ label: "Right", value: String(DIRECTION.RIGHT) },
-					{ label: "Up", value: String(DIRECTION.UP) },
-					{ label: "Down", value: String(DIRECTION.DOWN) },
+					{ label: "Left", value: String(Menu.DIRECTION.LEFT) },
+					{ label: "Right", value: String(Menu.DIRECTION.RIGHT) },
+					{ label: "Up", value: String(Menu.DIRECTION.UP) },
+					{ label: "Down", value: String(Menu.DIRECTION.DOWN) },
 				]}
 				bind:value={str_cross_direction}
 			/>
@@ -84,4 +88,25 @@
 			<Hst.Checkbox title="Open" bind:value={mergeCross_open} />
 		</svelte:fragment>
 	</Hst.Variant>
+	<Hst.Variant title="Arrow" icon="material-symbols:menu">
+		<Menu.Arrow
+			bind:open={arrow_open}
+			bind:duration={arrow_duration}
+			bind:direction={arrow_direction}
+		/>
+		<svelte:fragment slot="controls">
+			<Hst.Slider title="Duration" min={0} max={2} step={0.1} bind:value={arrow_duration} />
+			<Hst.Checkbox title="Open" bind:value={arrow_open} />
+			<Hst.ButtonGroup
+				title="Direction"
+				options={[
+					{ label: "Left", value: String(Menu.DIRECTION.LEFT) },
+					{ label: "Right", value: String(Menu.DIRECTION.RIGHT) },
+					{ label: "Up", value: String(Menu.DIRECTION.UP) },
+					{ label: "Down", value: String(Menu.DIRECTION.DOWN) },
+				]}
+				bind:value={str_arrow_direction}
+			/>
+		</svelte:fragment>
+	</Hst.Variant>
 </Hst.Story>