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();

src/lib/permissions.ts

@@ -1,8 +1,13 @@
 export enum Permissions {
 	ALL = "*",
 	VIEW = "view",
+
 	ADD_PROFILE = "add_profile",
 	REMOVE_PROFILE = "remove_profile",
+
+	ADD_GRAPH = "add_graph",
+	REMOVE_GRAPH = "remove_graph",
+
 	VIEW_USERS = "view_users",
 	ADD_USER = "add_user",
 	EDIT_USER = "edit_user",

src/routes/_layout.svelte

@@ -40,4 +40,7 @@
 		padding-top: $navbar-padding;
 		min-height: calc(100% - #{$navbar-padding} - 0.75em);
 	}
+	:global(button) {
+		font-family: "Fira Code", monospace;
+	}
 </style>

src/routes/login.svelte

@@ -34,19 +34,9 @@
 	>
 		<h2>Login</h2>
 		<p id="status">{status}</p>
-		<input
+		<input type="text" placeholder="Username" bind:value={username} />
-			type="text"
+		<input type="password" placeholder="Password" bind:value={password} />
-			id="username"
+		<input type="submit" value="Login" />
-			placeholder="Username"
-			bind:value={username}
-		/><br />
-		<input
-			type="password"
-			id="password"
-			placeholder="Password"
-			bind:value={password}
-		/><br />
-		<input type="submit" id="submit" value="Login" />
 	</form>
 </div>
 

src/routes/profile/new.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from "@sapper/app";
-	import { login } from "../../components/stores";
+	import { login, extraNav } from "../../components/stores";
 	import {
 		getPlayerProfiles,
 		getUUID,
@@ -8,12 +8,25 @@
 		putProfiles
 	} from "../../lib/api";
 
+	$extraNav; // important for subscription to store to be activated
+
 	let username = "";
 	let uuid = "";
 	let status = "";
 	let profilesPromise: ReturnType<typeof getPlayerProfiles> = new Promise(
 		resolve => resolve([])
 	);
+
+	$: if (!uuid) {
+		extraNav.set([
+			["Add", () => ([username, uuid, status] = ["", "", ""])]
+		]);
+	} else {
+		extraNav.set([
+			["Add", () => ([username, uuid, status] = ["", "", ""])],
+			username
+		]);
+	}
 </script>
 
 <svelte:head>
@@ -38,9 +51,8 @@
 		<p id="status">{status}</p>
 		<input
 			type="text"
-			id="username"
-			bind:value={username}
 			placeholder="Minecraft Username"
+			bind:value={username}
 		/>
 		<input type="submit" value="Search" />
 	</form>

src/styles/Form.scss

@@ -1,4 +1,6 @@
 form {
+	display: flex;
+	flex-direction: column;
 	padding: 1em;
 	background-color: hsl(236, 10%, 20%);
 	p#status {
@@ -6,7 +8,6 @@ form {
 	}
 }
 input {
-	width: calc(100% - 1.5em);
 	background: none;
 	padding: 0.75em;
 	margin-bottom: 1em;