Nav extra details

src/components/Graphs.svelte

@@ -11,7 +11,7 @@
 <div id="list">
 	{#await graphsPromise}
 		<span class="item">
-			<h2>Fetching profiles...</h2>
+			<h2>Fetching graphs...</h2>
 		</span>
 	{:then graphs}
 		{#each graphs as graph}

src/components/Navbar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	export let segment: string | undefined;
 	import { postLogout } from "../lib/api";
-	import { login } from "./stores";
+	import { extraNav, login } from "./stores";
 </script>
 
 <nav>
@@ -16,6 +16,23 @@
 		<h3>Graphs</h3>
 	</a>
 	<span class="sep" />
+	{#if $extraNav !== undefined}
+		<span class="extra">
+			<h3>
+				{#each $extraNav.filter(i => i) as item}
+					<span class="spacer" />
+					{#if typeof item === "string"}
+						<span>{item}</span>
+					{:else}
+						<button type="button" on:click={item[1]}>
+							{item[0]}
+						</button>
+					{/if}
+				{/each}
+			</h3>
+		</span>
+		<span class="sep" />
+	{/if}
 	<div class="sep" />
 	<span class="sep" />
 	{#if $login === null || $login === undefined}
@@ -76,4 +93,39 @@
 	div.sep {
 		flex: 1;
 	}
+	.extra {
+		padding-left: 0;
+		@media screen and (max-width: 803px) {
+			display: none;
+		}
+		h3 {
+			span,
+			button {
+				color: hsl(30, 20%, 90%);
+				font-size: 1em;
+				font-weight: 500;
+				padding: 0;
+				display: inline;
+				background: none;
+				border: none;
+				user-select: text;
+				-ms-user-select: text;
+				-moz-user-select: text;
+				-webkit-user-select: text;
+			}
+			span.spacer::before {
+				text-decoration: none;
+				content: ">";
+				margin-left: 1em;
+				color: hsl(30, 5%, 60%);
+				font-weight: 100;
+				font-size: 0.75em;
+				vertical-align: middle;
+			}
+			button:hover {
+				cursor: pointer;
+				text-decoration: underline;
+			}
+		}
+	}
 </style>

src/components/stores.ts

@@ -27,3 +27,25 @@ function createLogin() {
 }
 
 export const login = createLogin();
+
+function createExtraNav() {
+	const { subscribe, set, update } = writable<
+		(string | [string, () => void])[] | undefined
+	>();
+
+	return {
+		subscribe: (
+			...params: Parameters<typeof subscribe>
+		): ReturnType<typeof subscribe> => {
+			const unsubscribe = subscribe(...params);
+			return () => {
+				set(undefined);
+				unsubscribe();
+			};
+		},
+		set,
+		update
+	};
+}
+
+export const extraNav = createExtraNav();