Merge pull request #494 from matt8707/section

Hide header if empty
matt8707 · Jun 9, 2024 · fdc82ab · fdc82ab
2 parents c0a3480 + e1305f9
commit fdc82ab
Showing 1 changed file with 22 additions and 19 deletions.
diff --git a/src/lib/Main/SectionHeader.svelte b/src/lib/Main/SectionHeader.svelte
@@ -1,33 +1,36 @@
 <script lang="ts">
-	import { editMode } from '$lib/Stores';
+	import { editMode, motion } from '$lib/Stores';
 	import DragIndicator from '$lib/Main/DragIndicator.svelte';
 	import DeleteButton from '$lib/Main/DeleteButton.svelte';
 	import SectionTitle from '$lib/Main/SectionTitle.svelte';
+	import { slide } from 'svelte/transition';
 
 	export let view: any;
 	export let section: any;
 </script>
 
-<header>
-	<h1 style:cursor={$editMode ? 'text' : 'initial'}>
-		{#if $editMode}
-			<SectionTitle bind:value={section.name} />
-		{:else if section?.name === ''}
-			{@html '&nbsp;'}
-		{:else}
-			{section?.name}
-		{/if}
-	</h1>
+{#if section?.name !== '' || $editMode}
+	<header transition:slide={{ duration: $motion }}>
+		<h1 style:cursor={$editMode ? 'text' : 'initial'}>
+			{#if $editMode}
+				<SectionTitle bind:value={section.name} />
+			{:else if section?.name === ''}
+				{@html '&nbsp;'}
+			{:else}
+				{section?.name}
+			{/if}
+		</h1>
 
-	{#if $editMode}
-		<div class="right">
-			<DragIndicator />
+		{#if $editMode}
+			<div class="right">
+				<DragIndicator />
 
-			<!-- can't be asynchronously loaded, it'll flash on dnd -->
-			<DeleteButton {view} {section} />
-		</div>
-	{/if}
-</header>
+				<!-- can't be asynchronously loaded, it'll flash on dnd -->
+				<DeleteButton {view} {section} />
+			</div>
+		{/if}
+	</header>
+{/if}
 
 <style>
 	header {