Customizable navbar (#22)

Highly customizable navigation bar via drag and drop

package.json

@@ -36,6 +36,7 @@
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-dnd-action": "^0.9.40",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",

src/constants/nav.ts

@@ -2,103 +2,90 @@ export const navData = [
 	{
 		title: 'login',
 		uri: '/login',
-		showInNav: true,
 		navBoxIcon: 'bx-user',
 		showInFooter: true,
 		footerCategory: 'Authentication'
 	},
 	{
 		title: 'register',
 		uri: '/register',
-		showInNav: false,
 		navBoxIcon: 'bx-user-plus',
 		showInFooter: true,
 		footerCategory: 'Authentication'
 	},
 	{
 		title: 'notes',
 		uri: '/notes',
-		showInNav: true,
 		navBoxIcon: 'bx-notepad',
 		showInFooter: true,
 		footerCategory: 'Notes'
 	},
 	{
 		title: 'homework',
 		uri: '/homework',
-		showInNav: true,
 		navBoxIcon: 'bx-book',
 		showInFooter: true,
 		footerCategory: 'Homework'
 	},
 	{
 		title: 'events',
 		uri: '/events',
-		showInNav: true,
 		navBoxIcon: 'bx-calendar',
 		showInFooter: true,
 		footerCategory: 'events'
 	},
 	{
 		title: 'settings',
 		uri: '/settings',
-		showInNav: false,
 		navBoxIcon: 'bx-cog',
 		showInFooter: true,
 		footerCategory: 'Authentication'
 	},
 	{
 		title: 'export',
 		uri: '/tricks#export',
-		showInNav: false,
 		navBoxIcon: '',
 		showInFooter: true,
 		footerCategory: 'Tricks'
 	},
 	{
 		title: 'install',
 		uri: '/tricks#install',
-		showInNav: false,
 		navBoxIcon: '',
 		showInFooter: true,
 		footerCategory: 'Tricks'
 	},
 	{
 		title: 'status',
 		uri: '/requests',
-		showInNav: false,
 		navBoxIcon: '',
 		showInFooter: true,
 		footerCategory: 'Moderation'
 	},
 	{
 		title: 'requests',
 		uri: '/requests/list',
-		showInNav: false,
 		navBoxIcon: '',
 		showInFooter: true,
 		footerCategory: 'Moderation'
 	},
 	{
 		title: 'contributors',
 		uri: '/contributors',
-		showInNav: false,
 		navBoxIcon: '',
 		showInFooter: true,
 		footerCategory: 'Else'
 	},
 	{
 		title: 'documentation',
 		uri: '/documentation',
-		showInNav: false,
 		navBoxIcon: '',
 		showInFooter: true,
 		footerCategory: 'Else'
 	},
 	{
 		title: 'holiday',
 		uri: '/holidays',
-		showInNav: false,
 		navBoxIcon: '',
 		showInFooter: true,
 		footerCategory: 'Else'

src/constants/navbar.ts

@@ -0,0 +1,53 @@
+export const allIds = ['login', 'homework', 'events', 'notes', 'search', 'register'] as const;
+export type Id = (typeof allIds)[number];
+
+type UriGoal = {
+	type: 'uri';
+	uri: string;
+	boxIcon: string;
+	title: string;
+};
+
+type Custom = {
+	type: 'custom';
+	id: string;
+	boxIcon: string;
+};
+
+export const navbarData = {
+	login: {
+		type: 'uri',
+		uri: '/login',
+		boxIcon: 'bx-user',
+		title: 'login'
+	} as const,
+	homework: {
+		type: 'uri',
+		uri: '/homework',
+		boxIcon: 'bx-book',
+		title: 'homework'
+	} as const,
+	events: {
+		type: 'uri',
+		uri: '/events',
+		boxIcon: 'bx-calendar',
+		title: 'events'
+	} as const,
+	notes: {
+		type: 'uri',
+		uri: '/notes',
+		boxIcon: 'bx-notepad',
+		title: 'notes'
+	} as const,
+	search: {
+		type: 'custom',
+		boxIcon: 'bx-search',
+		id: 'search'
+	} as const,
+	register: {
+		type: 'uri',
+		uri: '/register',
+		boxIcon: 'bx-user-plus',
+		title: 'register'
+	} as const
+} satisfies Record<Id, UriGoal | Custom>;

src/enums/svocal.ts

@@ -39,5 +39,10 @@ export enum SvocalKeys {
 	/**
 	 * Default: true
 	 */
-	TIMETABLE_AUT_SORT = 'timetable.autosort'
+	TIMETABLE_AUT_SORT = 'timetable.autosort',
+
+	/**
+	 * Default: login, homework, events, notes
+	 */
+	NAVBAR_IDS = 'navbar.ids'
 }

src/languages/de.ts

@@ -197,6 +197,9 @@ const de = {
 	'settins.apperance.nav.text.show': 'Zeige Titel in der Navigationsleiste an',
 	'settins.apperance.nav.text.hide': 'Verstecke Titel in der Navigationsleiste',
 	'settings.apperance.nav.search': 'Suche in der Navigationsleiste anzeigen',
+	'settings.nav.add': 'Hinzufügen',
+	'settings.nav.unused': 'Ungenutzte Komponenten',
+	'settings.nav.tooltip': 'Bewege die icons einfach via Drag and Drop an die gewünschte Position',
 	'settings.apperance.homework.opacity': 'Transparenz abgelaufener Hausaufgaben',
 	'settings.homework.amount': 'Hausaufgaben pro Seite',
 

src/languages/en.ts

@@ -192,6 +192,9 @@ const en = {
 	'settins.apperance.nav.text.show': 'Show title in the navigation bar',
 	'settins.apperance.nav.text.hide': 'Hide title in the navigation bar',
 	'settings.apperance.nav.search': 'Show search in the navigation bar',
+	'settings.nav.add': 'Add',
+	'settings.nav.unused': 'Unused components',
+	'settings.nav.tooltip': 'Simply move the icons via drag and drop to their desired position',
 	'settings.apperance.homework.opacity': 'Transparency of finished homework',
 	'settings.homework.amount': 'Homework per page',
 

src/lib/navbar/NavItem.svelte

@@ -7,9 +7,7 @@
 	export let currentUri: string;
 	export let navBoxIcon: string;
 
-	const navDataTitles = navData
-		.filter((navDataEntry) => navDataEntry.showInNav)
-		.map((n) => n.title);
+	const navDataTitles = navData.map((n) => n.title);
 
 	type Title = (typeof navDataTitles)[number];
 

src/lib/navbar/Navbar.svelte

@@ -3,20 +3,37 @@
 	import HalloweenLogo from '$lib/seasons/halloween/halloweenLogo.svelte';
 	import StPatricksLogo from '$lib/seasons/stPatricks/StPatricksLogo.svelte';
 	import { isSpecialDate } from '$lib/specialDates/isInRange';
-	import { navData } from '../../constants/nav';
-	import { settings } from '../../stores';
+	import { localstorage } from 'svocal';
 	import NavItem from './NavItem.svelte';
 	import NavSearchButton from './NavSearchButton.svelte';
+	import { SvocalKeys } from '../../enums/svocal';
+	import { type Id, navbarData } from '../../constants/navbar';
+	import { sortByDifferentArray } from '$lib/utils/arrays/sort';
+	import { getEntries } from '$lib/utils/objects/entries';
 
 	export let height;
 
-	const navDataEntries = navData.filter((navDataEntry) => navDataEntry.showInNav);
+	let selectedItems = localstorage<Id[]>(SvocalKeys.NAVBAR_IDS, [
+		'login',
+		'homework',
+		'events',
+		'notes'
+	]);
 
-	let currentUri = $page.url.pathname as string;
+	const getNavEntries = () => {
+		const allEntries = getEntries(navbarData);
+		const selectedEntries = allEntries.filter(([entry]) =>
+			($selectedItems as string[]).includes(entry)
+		);
+		return sortByDifferentArray(selectedEntries, $selectedItems, ([title]) => title);
+	};
 
-	let showSearch = $settings.showSearchInNavbar;
+	let navEntries = getNavEntries();
+	selectedItems.subscribe(() => {
+		navEntries = getNavEntries();
+	});
 
-	settings.subscribe((s) => (showSearch = s.showSearchInNavbar));
+	let currentUri = $page.url.pathname as string;
 
 	page.subscribe(() => {
 		currentUri = $page.url.pathname;
@@ -44,17 +61,16 @@
 		<div
 			class="flex justify-around items-center gap-1 sm:gap-8 w-full sm:w-auto flex-wrap sm:flex-nowrap"
 		>
-			{#each navDataEntries as navDataEntry}
-				<NavItem
-					uri={navDataEntry.uri}
-					{currentUri}
-					navBoxIcon={navDataEntry.navBoxIcon}
-					title={navDataEntry.title}
-				/>
-			{/each}
-			{#if showSearch}
-				<NavSearchButton />
-			{/if}
+			{#key navEntries}
+				{#each navEntries as navEntry}
+					{@const data = navEntry[1]}
+					{#if data.type === 'uri'}
+						<NavItem uri={data.uri} {currentUri} navBoxIcon={data.boxIcon} title={data.title} />
+					{:else if data.id === 'search'}
+						<NavSearchButton />
+					{/if}
+				{/each}
+			{/key}
 		</div>
 	</nav>
 </div>