Hide navbar links to pages users don't have access to

frontend/src/includes/Navbar.svelte

@@ -6,15 +6,26 @@
       </div>
       <div class="nav-section" class:dropdown={$dropdown}>
         <!-- on:click required to close dropdown again -->
+
+        {#if isAdmin}
             <NavElement icon="fas fa-cogs" link="/manage/{guildId}/settings" on:click={closeDropdown}>Settings</NavElement>
+        {/if}
+
         <NavElement icon="fas fa-copy" link="/manage/{guildId}/transcripts" on:click={closeDropdown}>Transcripts</NavElement>
+
+        {#if isAdmin}
             <NavElement icon="fas fa-mouse-pointer" link="/manage/{guildId}/panels" on:click={closeDropdown}>Reaction Panels</NavElement>
             <NavElement icon="fas fa-poll-h" link="/manage/{guildId}/forms" on:click={closeDropdown}>Forms</NavElement>
             <NavElement icon="fas fa-users" link="/manage/{guildId}/teams" on:click={closeDropdown}>Staff Teams</NavElement>
+        {/if}
+
         <NavElement icon="fas fa-ticket-alt" link="/manage/{guildId}/tickets" on:click={closeDropdown}>Tickets</NavElement>
         <NavElement icon="fas fa-ban" link="/manage/{guildId}/blacklist" on:click={closeDropdown}>Blacklist</NavElement>
         <NavElement icon="fas fa-tags" link="/manage/{guildId}/tags" on:click={closeDropdown}>Tags</NavElement>
+
+        {#if isAdmin}
             <NavElement icon="fas fa-paint-brush" link="/manage/{guildId}/appearance" on:click={closeDropdown}>Customise Appearance</NavElement>
+        {/if}
       </div>
     </div>
     <div>
@@ -27,10 +38,13 @@
 </div>
 
 <script>
+    import NavElement from "../components/NavElement.svelte";
+
     export let guildId;
     export let dropdown;
+    export let permissionLevel;
 
-    import NavElement from "../components/NavElement.svelte";
+    $: isAdmin = permissionLevel >= 2;
 
     function dropdownNav() {
       dropdown.update(v => !v);

frontend/src/layouts/ManageLayout.svelte

@@ -1,7 +1,7 @@
 <Head/>
 
 <div class="wrapper">
-  <Navbar guildId={guildId} {dropdown}/>
+    <Navbar {guildId} {permissionLevel} {dropdown} />
     <div class="super-container" class:dropdown={$dropdown}>
         <LoadingScreen/>
         <div class="content-container" class:hide={$loadingScreen}>
@@ -35,16 +35,37 @@
 </style>
 
 <script>
-    export let currentRoute;
-    export let params = {};
-
-    let guildId = currentRoute.namedParams.id;
-
     import Head from '../includes/Head.svelte'
     import LoadingScreen from '../includes/LoadingScreen.svelte'
     import NotifyModal from '../includes/NotifyModal.svelte'
     import Navbar from '../includes/Navbar.svelte'
 
     import {Route} from 'svelte-router-spa'
-    import {loadingScreen, dropdown} from '../js/stores'
+    import {dropdown, loadingScreen} from '../js/stores'
+    import {notifyError, withLoadingScreen} from '../js/util';
+    import axios from "axios";
+    import {API_URL} from "../js/constants";
+    import {setDefaultHeaders} from '../includes/Auth.svelte'
+
+    export let currentRoute;
+    export let params = {};
+
+    let guildId = currentRoute.namedParams.id;
+    let permissionLevel = 0;
+
+    setDefaultHeaders();
+
+    async function loadPermissionLevel() {
+        const res = await axios.get(`${API_URL}/user/permissionlevel?guild=${guildId}`);
+        if (res.status !== 200 || !res.data.success) {
+            notifyError(res.data.error);
+            return;
+        }
+
+        permissionLevel = res.data.permission_level;
+    }
+
+    withLoadingScreen(async () => {
+        await loadPermissionLevel();
+    });
 </script>