More superadmin nav fixes

This commit is contained in:
Ben Allfree 2023-12-13 23:46:37 -08:00
parent fc7e3d363a
commit 460a1aaa18
2 changed files with 22 additions and 128 deletions

View File

@ -1,75 +0,0 @@
<script lang="ts">
import { page } from '$app/stores'
import Logo from '$components/Logo.svelte'
import MediaQuery from '$components/MediaQuery.svelte'
import { client } from '$src/pocketbase-client'
import { globalInstancesStore } from '$util/stores'
import { values } from '@s-libs/micro-dash'
import UserLoggedIn from './helpers/UserLoggedIn.svelte'
type TypeInstanceObject = {
id: string
subdomain: string
maintenance: boolean
}
let arrayOfActiveInstances: TypeInstanceObject[] = []
$: {
if ($globalInstancesStore) {
arrayOfActiveInstances = values($globalInstancesStore).filter(
(app) => !app.maintenance,
)
}
}
// Log the user out and redirect them to the homepage
const handleLogoutAndRedirect = async () => {
const { logOut } = client()
// Clear out the pocketbase information about the current user
logOut()
// Hard refresh to make sure any remaining data is cleared
window.location.href = '/'
}
const linkClasses =
'font-medium text-xl text-base-content btn btn-ghost capitalize justify-start'
const subLinkClasses =
'font-medium text-base-content btn btn-ghost btn-sm capitalize justify-start'
const addNewAppClasses =
'font-medium text-base-content btn btn-outline btn-primary btn-sm capitalize justify-start'
const handleClick = () => {
document.querySelector<HTMLElement>('.drawer-overlay')?.click()
}
</script>
<aside class="p-4 min-w-[250px] max-w-[250px] flex flex-col">
<MediaQuery query="(min-width: 1280px)" let:matches>
{#if matches}
<a href="/" class="flex gap-2 items-center justify-center">
<Logo hideLogoText={true} logoWidth="w-20" />
</a>
{/if}
</MediaQuery>
<div class="flex flex-col gap-2 mb-auto">
<a on:click={handleClick} href="/" class={linkClasses}>
<i
class="fa-regular fa-table-columns {$page.url.pathname === '/' &&
'text-primary'}"
></i> Dashboard
</a>
<UserLoggedIn>
<button
type="button"
class={linkClasses}
on:click={handleLogoutAndRedirect}
><i class="fa-regular fa-arrow-up-left-from-circle"></i> Logout</button
>
</UserLoggedIn>
</div>
</aside>

View File

@ -1,9 +1,6 @@
<script>
import { page } from '$app/stores'
import Logo from '$components/Logo.svelte'
import MediaQuery from '$components/MediaQuery.svelte'
import MobileNavDrawer from '$components/MobileNavDrawer.svelte'
import Navbar from '$components/Navbar.svelte'
import AuthStateGuard from '$components/helpers/AuthStateGuard.svelte'
import Meta from '$components/helpers/Meta.svelte'
import UserLoggedIn from '$components/helpers/UserLoggedIn.svelte'
@ -25,31 +22,10 @@
<AuthStateGuard>
<div class="layout xl:flex">
<UserLoggedIn>
<MediaQuery query="(min-width: 1280px)" let:matches>
{#if matches}
<Navbar />
{/if}
</MediaQuery>
<MediaQuery query="(max-width: 700px)" let:matches>
{#if matches}
<MobileNavDrawer>
<Navbar />
</MobileNavDrawer>
{/if}
</MediaQuery>
</UserLoggedIn>
<div class="p-0 lg:p-4 min-h-screen grow">
<div
class="bg-base-300 border-base-300 border-[16px] m-0 md:p-4 rounded-2xl"
>
<MediaQuery
query="(min-width: 701px) and (max-width: 1279px)"
let:matches
>
{#if matches}
<UserLoggedIn>
<div role="tablist" class="tabs tabs-boxed">
<a href="/" role="tab" class="tab">
@ -58,9 +34,7 @@
<a
role="tab"
class="tab {$page.url.pathname === '/stats'
? `tab-active`
: ``}"
class="tab {$page.url.pathname === '/stats' ? `tab-active` : ``}"
href="/stats">Stats</a
>
<a
@ -71,16 +45,11 @@
href="/plugins">Plugins</a
>
<button
type="button"
class="tab"
on:click={handleLogoutAndRedirect}
<button type="button" class="tab" on:click={handleLogoutAndRedirect}
><i class="fa-regular fa-arrow-up-left-from-circle mr-2"></i> Logout</button
>
</div>
</UserLoggedIn>
{/if}
</MediaQuery>
<slot />
</div>