From e1305f91ab5ad18312cc3b00f671c9a18a68188b Mon Sep 17 00:00:00 2001
From: Mattias Persson <mattias.persson.87@gmail.com>
Date: Sun, 9 Jun 2024 12:04:49 +0200
Subject: [PATCH] Hide header if empty

---
 src/lib/Main/SectionHeader.svelte | 41 +++++++++++++++++--------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/lib/Main/SectionHeader.svelte b/src/lib/Main/SectionHeader.svelte
index 3500a36b..cefd8094 100644
--- 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 {