Require permission side bar

src/lib/components/app-sidebar.svelte

@@ -3,6 +3,7 @@
 	import { onDestroy, type ComponentProps } from 'svelte';
 	import { asset } from '$app/paths';
 	import AppAccountSelect from './app-account-select.svelte';
+	import { needPermission } from '$lib/core/handlers/permissionHandler';
 	import {
 		Code,
 		LayoutDashboard,
@@ -34,7 +35,8 @@
 					{
 						title: 'Dashboard',
 						url: '/dashboard',
-						icon: LayoutDashboard
+						icon: LayoutDashboard,
+						requirePerm: ''
 					}
 				]
 			},
@@ -44,17 +46,20 @@
 					{
 						title: 'Overview',
 						url: '/recipe/overview',
-						icon: LucideEye
+						icon: LucideEye,
+						requirePerm: ''
 					},
 					{
 						title: 'Topping',
 						url: '/recipe/topping',
-						icon: CherryIcon
+						icon: CherryIcon,
+						requirePerm: ''
 					},
 					{
 						title: 'Material',
 						url: '/recipe/material',
-						icon: DiamondIcon
+						icon: DiamondIcon,
+						requirePerm: ''
 					}
 				]
 			},
@@ -64,12 +69,14 @@
 					{
 						title: 'Brew',
 						url: '/tools/brew',
-						icon: CupSodaIcon
+						icon: CupSodaIcon,
+						requirePerm: ''
 					},
 					{
 						title: 'Debug',
 						url: '/tools/debug',
-						icon: BugIcon
+						icon: BugIcon,
+						requirePerm: ''
 					}
 				]
 			},
@@ -79,8 +86,8 @@
 					{
 						title: 'Overview',
 						url: '/departments',
-						icon: FileSpreadsheet
+						icon: FileSpreadsheet,
-
+						requirePerm: 'document.write.*'
 					}
 				]
 			}
@@ -126,6 +133,19 @@
 		unsubSidebar();
 	});
 
+	let authorizedNavMain = $derived(
+		data.navMain.map(nav => {
+			const filteredItems = nav.items.filter(item => {
+				if (!item.requirePerm) return true;
+
+				return needPermission(item.requirePerm);
+			});
+
+			return { ...nav, items: filteredItems };
+			
+		}).filter(nav => nav.items.length > 0)
+	);
+
 	let {
 		ref = sideBar,
 		collapsible = 'icon',
@@ -142,7 +162,7 @@
 		</div>
 	</Sidebar.Header>
 	<Sidebar.Content>
-		{#each data.navMain as nav}
+		{#each authorizedNavMain as nav}
 			<Sidebar.Group>
 				<Sidebar.GroupLabel>{nav.title}</Sidebar.GroupLabel>
 				<Sidebar.GroupContent>

src/routes/(authed)/entry/+page.svelte

@@ -81,7 +81,9 @@
 				>
 					<img src={RecipeModuleBtn} alt="Recipes" loading="lazy" />
 				</button>
+			{/if}
 
+			{#if perms.filter((x) => x.startsWith('document.write')).length > 0}
 				<button
 					class="button"
 					id="sheet_mod_btn"