🧼 Simplifies the menu structure

2024-08-19 22:48:57 +02:00
parent d07b0b5d7f
commit 42405ec93f
7 changed files with 288 additions and 272 deletions
@@ -0,0 +1,192 @@
+<script lang="ts">
+	import MdiConnection from '~icons/mdi/connection';
+	import Users from '~icons/mdi/users';
+	import Settings from '~icons/mdi/settings';
+	import MdiController from '~icons/mdi/controller';
+	import Devices from '~icons/mdi/devices';
+	import Camera from '~icons/mdi/camera-outline';
+	import Rotate3d from '~icons/mdi/rotate-3d';
+	import MotorOutline from '~icons/mdi/motor-outline';
+	import Health from '~icons/mdi/stethoscope';
+	import Folder from '~icons/mdi/folder-outline';
+	import Update from '~icons/mdi/reload';
+	import WiFi from '~icons/mdi/wifi';
+	import Router from '~icons/mdi/router';
+	import AP from '~icons/mdi/access-point';
+	import Remote from '~icons/mdi/network';
+	import Copyright from '~icons/mdi/copyright';
+	import NTP from '~icons/mdi/clock-check';
+	import Metrics from '~icons/mdi/report-bar';
+	import { page } from '$app/stores';
+	import { user } from '$lib/stores/user';
+	import { createEventDispatcher } from 'svelte';
+	import { useFeatureFlags } from '$lib/stores/featureFlags';
+	import UserButton from '../menu/UserButton.svelte';
+	import GithubButton from '../menu/GithubButton.svelte';
+	import LogoButton from '../menu/LogoButton.svelte';
+	import MenuList from '../menu/MenuList.svelte';
+
+	const features = useFeatureFlags();
+
+	const appName = $page.data.app_name;
+
+	const copyright = $page.data.copyright;
+
+	const github = { href: 'https://github.com/' + $page.data.github, active: true };
+
+	type menuItem = {
+		title: string;
+		icon: ConstructorOfATypedSvelteComponent;
+		href?: string;
+		feature: boolean;
+		active?: boolean;
+		submenu?: menuItem[];
+	};
+
+	$: menuItems = [
+		{
+			title: 'Controller',
+			icon: MdiController,
+			href: '/controller',
+			feature: true
+		},
+		{
+			title: 'Peripherals',
+			icon: Devices,
+			feature: true,
+			submenu: [
+				{
+					title: 'I2C',
+					icon: MdiConnection,
+					href: '/peripherals/i2c',
+					feature: true
+				},
+				{
+					title: 'Camera',
+					icon: Camera,
+					href: '/peripherals/camera',
+					feature: $features.camera
+				},
+				{
+					title: 'Servo',
+					icon: MotorOutline,
+					href: '/peripherals/servo',
+					feature: true
+				},
+				{
+					title: 'IMU',
+					icon: Rotate3d,
+					href: '/peripherals/imu',
+					feature: $features.imu || $features.mag || $features.bmp
+				}
+			]
+		},
+		{
+			title: 'Connections',
+			icon: Remote,
+			feature: $features.ntp,
+			submenu: [
+				{
+					title: 'NTP',
+					icon: NTP,
+					href: '/connections/ntp',
+					feature: $features.ntp
+				}
+			]
+		},
+		{
+			title: 'WiFi',
+			icon: WiFi,
+			feature: true,
+			submenu: [
+				{
+					title: 'WiFi Station',
+					icon: Router,
+					href: '/wifi/sta',
+					feature: true
+				},
+				{
+					title: 'Access Point',
+					icon: AP,
+					href: '/wifi/ap',
+					feature: true
+				}
+			]
+		},
+		{
+			title: 'Users',
+			icon: Users,
+			href: '/user',
+			feature: $features.security && $user.admin
+		},
+		{
+			title: 'System',
+			icon: Settings,
+			feature: true,
+			submenu: [
+				{
+					title: 'System Status',
+					icon: Health,
+					href: '/system/status',
+					feature: true
+				},
+				{
+					title: 'File System',
+					icon: Folder,
+					href: '/system/filesystem',
+					feature: true
+				},
+				{
+					title: 'System Metrics',
+					icon: Metrics,
+					href: '/system/metrics',
+					feature: $features.analytics
+				},
+				{
+					title: 'Firmware Update',
+					icon: Update,
+					href: '/system/update',
+					feature:
+						($features.ota || $features.upload_firmware || $features.download_firmware) &&
+						(!$features.security || $user.admin)
+				}
+			]
+		}
+	] as menuItem[];
+
+	const dispatch = createEventDispatcher();
+
+	function setActiveMenuItem(targetTitle: string) {
+		menuItems.forEach((item) => {
+			item.active = item.title === targetTitle;
+			item.submenu?.forEach((subItem) => {
+				subItem.active = subItem.title === targetTitle;
+			});
+		});
+		menuItems = menuItems;
+		dispatch('menuClicked');
+	}
+
+	$: setActiveMenuItem($page.data.title);
+
+    const updateMenu = (event:any) => {
+        setActiveMenuItem(event.details)
+    }
+</script>
+
+<div class="bg-base-200 text-base-content flex h-full w-80 flex-col p-4">
+	<LogoButton {appName} />
+
+    <MenuList {menuItems} on:select{updateMenu} class="flex-grow flex-nowrap overflow-y-auto"/>
+
+	<UserButton />
+
+	<div class="divider my-0" />
+
+	<div class="flex items-center justify-between">
+		<GithubButton {github} />
+		<div class="flex items-center justify-end text-sm gap-2">
+			<Copyright class="h-4 w-4" />{copyright}
+		</div>
+	</div>
+</div>