More superadmin nav fixes

frontends/superadmin/src/components/Navbar.svelte

@@ -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>

frontends/superadmin/src/routes/+layout.svelte

@@ -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'
+              class="tab {$page.url.pathname === '/stats' ? `tab-active` : ``}"
-                    ? `tab-active`
-                    : ``}"
               href="/stats">Stats</a
             >
             <a
@@ -71,16 +45,11 @@
               href="/plugins">Plugins</a
             >
 
-                <button
+            <button type="button" class="tab" on:click={handleLogoutAndRedirect}
-                  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>