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

This commit is contained in:
rxdn 2022-06-22 21:12:00 +01:00
parent 1ec71e586a
commit 458d9551c1
2 changed files with 54 additions and 19 deletions

View File

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

View File

@ -1,14 +1,14 @@
<Head/> <Head/>
<div class="wrapper"> <div class="wrapper">
<Navbar guildId={guildId} {dropdown}/> <Navbar {guildId} {permissionLevel} {dropdown} />
<div class="super-container" class:dropdown={$dropdown}> <div class="super-container" class:dropdown={$dropdown}>
<LoadingScreen/> <LoadingScreen/>
<div class="content-container" class:hide={$loadingScreen}> <div class="content-container" class:hide={$loadingScreen}>
<Route {currentRoute} {params}/> <Route {currentRoute} {params}/>
</div>
<NotifyModal/>
</div> </div>
<NotifyModal/>
</div>
</div> </div>
<style> <style>
@ -35,16 +35,37 @@
</style> </style>
<script> <script>
export let currentRoute;
export let params = {};
let guildId = currentRoute.namedParams.id;
import Head from '../includes/Head.svelte' import Head from '../includes/Head.svelte'
import LoadingScreen from '../includes/LoadingScreen.svelte' import LoadingScreen from '../includes/LoadingScreen.svelte'
import NotifyModal from '../includes/NotifyModal.svelte' import NotifyModal from '../includes/NotifyModal.svelte'
import Navbar from '../includes/Navbar.svelte' import Navbar from '../includes/Navbar.svelte'
import {Route} from 'svelte-router-spa' 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> </script>