Merge pull request #14 from binhtran432k/feature/navbar

Enhance Navigation bar with Responsive support

.editorconfig

@@ -1,5 +1,5 @@
 root = true
 
-[*.{js,ts,css,html}]
+[*.{js,ts,css,html,svelte,json}]
 indent_size = 2
-indent_style = space
+indent_style = tab

packages/www/.prettierrc

@@ -3,10 +3,6 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": [
-		"prettier-plugin-svelte",
-		"prettier-plugin-tailwindcss",
-		"prettier-plugin-tailwindcss"
-	],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

packages/www/package.json

@@ -22,6 +22,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "^8.56.7",
 		"autoprefixer": "^10.4.19",
+		"daisyui": "^4.12.2",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
@@ -37,5 +38,8 @@
 		"vite": "^5.0.3",
 		"vitest": "^1.2.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"clsx": "^2.1.1"
+	}
 }

packages/www/src/lib/components/Navbar.svelte

@@ -0,0 +1,75 @@
+<script>
+	import Menu from '$lib/icons/Menu.svelte';
+	import Close from '$lib/icons/Close.svelte';
+	import Privacy from './Privacy.svelte';
+	import Github from '$lib/icons/Github.svelte';
+	import clsx from 'clsx';
+
+	let isMenuOpen = false;
+	function toggleMenu() {
+		isMenuOpen = !isMenuOpen;
+	}
+
+	/**
+	 * @typedef Link
+	 * @property {string} href
+	 * @property {string} [title]
+	 * @property {'github'} [icon]
+	 */
+
+	/** @type {Link[]} */
+	const links = [
+		{
+			href: 'https://github.com/binhtran432k/story-mapping-generator',
+			icon: 'github'
+		}
+	];
+</script>
+
+<div class="navbar relative z-50 bg-primary text-primary-content shadow-lg">
+	<div class="mx-2 flex-1">
+		<span class="text-lg font-bold">
+			<a href="/" class="flex flex-col items-baseline gap-2 sm:flex-row"
+				><span>Story Mapping Generator</span><span class="text-xs font-thin">by Binh Tran</span></a
+			>
+		</span>
+	</div>
+
+	<label for="menu-toggle" class="cursor-pointer text-2xl lg:hidden">
+		{#if isMenuOpen}<Close />{:else}<Menu />{/if}
+	</label>
+	<input
+		class="hidden"
+		type="checkbox"
+		id="menu-toggle"
+		bind:checked={isMenuOpen}
+		on:click={toggleMenu}
+	/>
+
+	<div
+		class={clsx(
+			'w-full bg-primary lg:flex lg:w-auto lg:items-center',
+			isMenuOpen ? 'absolute left-0 top-full flex p-2' : 'hidden'
+		)}
+		id="menua"
+	>
+		<!-- <Theme /> -->
+		<ul class="w-full items-center justify-between pt-2 text-base lg:flex lg:pt-0">
+			<li>
+				<Privacy />
+			</li>
+			{#each links as { title, href, icon }}
+				<li>
+					<a class="btn btn-ghost w-full" target="_blank" {href}>
+						{#if icon == 'github'}
+							<Github class="text-2xl" />
+						{/if}
+						{#if title}
+							{title}
+						{/if}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</div>

packages/www/src/lib/components/Privacy.svelte

@@ -0,0 +1,34 @@
+<script>
+	import Close from '$lib/icons/Close.svelte';
+	import Shield from '$lib/icons/Shield.svelte';
+</script>
+
+<label for="privacyModal" class="btn btn-ghost w-full">
+	<Shield class="text-2xl" /><span>Security</span>
+</label>
+
+<input type="checkbox" id="privacyModal" class="modal-toggle" />
+<div class="modal overscroll-none" role="dialog">
+	<div class="modal-box flex flex-col gap-4 text-base-content">
+		<h1 class="text-3xl font-bold">Data security</h1>
+		<p>
+			<span class="text-xl font-extrabold">
+				The content of the diagrams you create never leaves your browser.
+			</span>
+			It's stored in the URL, and the browser's local storage only.
+		</p>
+		<p>
+			Mermaid live editor is a fully client side application, that will also work as an offline <a
+				href="https://web.dev/explore/progressive-web-apps"
+				class="link"
+				target="_blank"
+			>
+				PWA.
+			</a>
+		</p>
+
+		<label class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2" for="privacyModal">
+			<Close class="text-2xl" />
+		</label>
+	</div>
+</div>

packages/www/src/lib/icons/Close.svelte

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...$$props}
+	><path
+		fill="currentColor"
+		d="M17.414 16L24 9.414L22.586 8L16 14.586L9.414 8L8 9.414L14.586 16L8 22.586L9.414 24L16 17.414L22.586 24L24 22.586z"
+	/></svg
+>

packages/www/src/lib/icons/Github.svelte

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...$$props}
+	><path
+		fill="currentColor"
+		fill-rule="evenodd"
+		d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.7 3.7 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2"
+	/></svg
+>

packages/www/src/lib/icons/Menu.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...$$props}
+	><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z" /></svg
+>

packages/www/src/lib/icons/Shield.svelte

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...$$props}
+	><path
+		fill="currentColor"
+		d="m16 30l-6.176-3.293A10.98 10.98 0 0 1 4 17V4a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v13a10.98 10.98 0 0 1-5.824 9.707ZM6 4v13a8.99 8.99 0 0 0 4.766 7.942L16 27.733l5.234-2.79A8.99 8.99 0 0 0 26 17V4Z"
+	/><path fill="currentColor" d="M16 25.277V6h8v10.805a7 7 0 0 1-3.7 6.173Z" /></svg
+>

packages/www/src/routes/+layout.svelte

@@ -2,8 +2,6 @@
 	import '../app.css';
 </script>
 
-<slot></slot>
-
-<slot></slot>
-
-<style></style>
+<main class="h-screen text-base-content">
+	<slot />
+</main>

packages/www/src/routes/+page.svelte

@@ -1,2 +1,8 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+	import Navbar from '$lib/components/Navbar.svelte';
+</script>
+
+<div class="flex h-full flex-col overflow-hidden">
+	<Navbar />
+	TODO: Add body
+</div>

packages/www/tailwind.config.js

@@ -1,4 +1,5 @@
-/** @type {import('tailwindcss').Config} */
+import daisyui from 'daisyui';
+
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
@@ -7,5 +8,5 @@ export default {
 		extend: {}
 	},
 
-	plugins: []
+	plugins: [daisyui]
 };