Navbar

src/lib/Navbar/index.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	interface Link {
+		title: string;
+		href: string;
+	}
+	const links: Link[] = [
+		{
+			title: 'Documentation',
+			href: 'https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted'
+		},
+		{
+			title: 'Tutorial',
+			href: 'https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md'
+		},
+		{
+			title: 'Github',
+			href: 'https://github.com/mermaid-js/mermaid-live-editor'
+		},
+		{
+			title: 'Mermaid',
+			href: 'https://github.com/mermaid-js/mermaid'
+		},
+		{
+			title: 'CLI',
+			href: 'https://github.com/mermaid-js/mermaid-cli'
+		}
+	];
+</script>
+
+<header class="p-2 bg-blue-400 text-white font-bold flex flex-wrap items-center">
+	<div class="flex-1 flex justify-between items-center">
+		<a href="/"> Mermaid Live Editor </a>
+	</div>
+
+	<label for="menu-toggle" class="pointer-cursor lg:hidden block"
+		><svg
+			class="fill-current text-gray-900"
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			><title>menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg
+		></label
+	>
+	<input class="hidden" type="checkbox" id="menu-toggle" />
+
+	<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
+		<nav>
+			<ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
+				{#each links as { title, href }}
+					<li>
+						<a class="nav-btn" {href}>{title}</a>
+					</li>
+				{/each}
+			</ul>
+		</nav>
+	</div>
+</header>
+
+<style lang="postcss">
+	#menu-toggle:checked + #menu {
+		display: block;
+	}
+	.nav-btn {
+		@apply lg:p-2 py-3 px-0 block border-b-2 border-transparent hover:border-white;
+	}
+</style>

src/routes/edit.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import Editor from '$lib/Editor/index.svelte';
+	import Navbar from '$lib/Navbar/index.svelte';
+
 	import View from '$lib/View/index.svelte';
 	import Card from '$lib/Card/index.svelte';
 	import Tabs from '$lib/Tabs/index.svelte';
@@ -99,33 +101,38 @@
 <svelte:head>
 	<title>Edit</title>
 </svelte:head>
-
-<div class="flex">
-	<div class="w-2/5 h-screen flex flex-col gap-6">
-		<Card class="h-1/2">
-			<div slot="title" class="flex">
-				<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} /></div>
-				<div class="flex-grow" />
-				<div class="flex gap-x-4 text-white">
-					{#if !$codeStore.autoSync}
-						<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}
-							>🔄</button
-						>
-					{/if}
-					<label for="autoSync">
-						<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
-						Auto sync
-					</label>
+<div>
+	<Navbar />
+	<div class="flex">
+		<div class="w-2/5 flex-grow flex flex-col" style="resize:both;">
+			<Card class="h-3/5">
+				<div slot="title" class="flex">
+					<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} /></div>
+					<div class="flex-grow" />
+					<div class="flex gap-x-4 text-white">
+						{#if !$codeStore.autoSync}
+							<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}
+								>🔄</button
+							>
+						{/if}
+						<label for="autoSync">
+							<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
+							Auto sync
+						</label>
+					</div>
 				</div>
-			</div>
 
-			<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
-		</Card>
-		<History />
-	</div>
+				<div class="h-full flex-grow flex flex-col">
+					<div class="flex-grow">
+						<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
+					</div>
+					<div class="flex-none">Sample</div>
+				</div>
+			</Card>
+			<History />
+		</div>
 
-	<div class="w-3/5 h-3/5">
-		<Card class="h-full">
+		<Card class="w-3/5 h-3/5">
 			<div slot="title" class="text-white">Diagram</div>
 			<View />
 		</Card>