Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-03-30 15:08:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

socials

Browse Source
This commit is contained in:
Ben Allfree 2024-12-03 02:06:02 -08:00
parent 3a75125216
commit a302c9ec86
2 changed files with 69 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/dashboard/src/routes/Navbar/Navbar.svelte
View File

@ -1,6 +1,12 @@
<script lang="ts">
import Logo from '$src/routes/Navbar/Logo.svelte'
import Fa from 'svelte-fa'
import NavbarMenu from './NavbarMenu.svelte'
import {
faDiscord,
faGithub,
faProductHunt,
} from '@fortawesome/free-brands-svg-icons'
</script>
<div class="navbar bg-base-100 lg:pl-6">
@ -12,21 +18,47 @@
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16" />
d="M4 6h16M4 12h8m-8 6h16"
/>
</svg>
</div>
<NavbarMenu isCollapsed />
</div>
<a href="/" class="flex items-center">
<a href="/" class="flex items-center pr-2 border-r-2 border-neutral">
<Logo />
<!-- Redundant with the Logo component -->
<!-- <div class="hidden md:block ml-1 text-sm">PocketHost</div> -->
</a>
<a
href="https://github.com/pockethost/pockethost"
rel="noreferrer"
target="_blank"
class="m-2"
>
<Fa icon={faGithub} />
</a>
<a
href="https://www.producthunt.com/products/pockethost"
rel="noreferrer"
target="_blank"
class="m-2"
>
<Fa icon={faProductHunt} />
</a>
<a
href="https://discord.gg/nVTxCMEcGT"
rel="noreferrer"
target="_blank"
class="m-2"
>
<Fa icon={faDiscord} />
</a>
</div>
<div class="flex-none">
<NavbarMenu />

69
packages/dashboard/src/routes/Navbar/NavbarMenu.svelte
View File

@ -1,11 +1,17 @@
<script lang="ts">
import { client } from '$src/pocketbase-client'
import UserHasRole from "$components/guards/UserHasRole.svelte"
import UserLoggedIn from "$components/guards/UserLoggedIn.svelte"
import UserLoggedOut from "$components/guards/UserLoggedOut.svelte"
import Avatar from "./Avatar.svelte"
import UserHasRole from '$components/guards/UserHasRole.svelte'
import UserLoggedIn from '$components/guards/UserLoggedIn.svelte'
import UserLoggedOut from '$components/guards/UserLoggedOut.svelte'
import {
faDiscord,
faGithub,
faProductHunt,
} from '@fortawesome/free-brands-svg-icons'
import Avatar from './Avatar.svelte'
import Fa from 'svelte-fa'
// Log the user out and redirect them to the homepage
// Log the user out and redirect them to the homepage
const handleLogoutAndRedirect = async () => {
const { logOut } = client()
@ -19,28 +25,32 @@
export let isCollapsed = false
</script>
<ul class={`menu ${isCollapsed ? "dropdown-content bg-base-200 rounded-box z-[1] mt-3 w-52 p-2 shadow-xl" : "menu-horizontal items-center"}`} role="menu" tabindex="0">
<ul
class={`menu ${isCollapsed ? 'dropdown-content bg-base-200 rounded-box z-[1] mt-3 w-52 p-2 shadow-xl' : 'menu-horizontal items-center'}`}
role="menu"
tabindex="0"
>
<UserLoggedIn>
<li class={isCollapsed ? "" : "hidden lg:flex"}>
<li class={isCollapsed ? '' : 'hidden lg:flex'}>
<a href="/dashboard" rel="noreferrer">Dashboard</a>
</li>
</UserLoggedIn>
<UserHasRole role="stats">
<li class={isCollapsed ? "" : "hidden lg:flex"}>
<li class={isCollapsed ? '' : 'hidden lg:flex'}>
<a href="/stats">Stats</a>
</li>
</UserHasRole>
<li class={isCollapsed ? "" : "hidden lg:flex"}>
<li class={isCollapsed ? '' : 'hidden lg:flex'}>
<a href="/pricing" rel="noreferrer">Pricing</a>
</li>
<li class={isCollapsed ? "" : "hidden lg:flex"}>
<li class={isCollapsed ? '' : 'hidden lg:flex'}>
<a href="/support" rel="noreferrer">Support</a>
</li>
<li class={isCollapsed ? "" : "hidden lg:flex"}>
<li class={isCollapsed ? '' : 'hidden lg:flex'}>
<a href="/docs" rel="noreferrer">Docs</a>
</li>
<UserLoggedOut>
<li class={isCollapsed ? "" : "hidden lg:flex"}>
<li class={isCollapsed ? '' : 'hidden lg:flex'}>
<a href="/about" rel="noreferrer">About</a>
</li>
</UserLoggedOut>
@ -48,17 +58,18 @@
<UserLoggedIn>
{#if !isCollapsed}
<li>
<div class="dropdown dropdown-end p-0 m-0">
<Avatar />
<div class="dropdown dropdown-end p-0 m-0">
<Avatar />
<ul class="menu dropdown-content bg-base-300 rounded-box z-[1] mt-36 md:mt-24 w-52 p-2 shadow">
<li><a href="/account">Settings</a></li>
<li>
<button on:click={handleLogoutAndRedirect}>Logout</button>
</li>
</ul>
</div>
<ul
class="menu dropdown-content bg-base-300 rounded-box z-[1] mt-36 md:mt-24 w-52 p-2 shadow"
>
<li><a href="/account">Settings</a></li>
<li>
<button on:click={handleLogoutAndRedirect}>Logout</button>
</li>
</ul>
</div>
</li>
{/if}
</UserLoggedIn>
@ -67,22 +78,10 @@
<a href="/login" class="">Login</a>
</li>
</UserLoggedOut>
{#if !isCollapsed}
<li>
<a href="https://github.com/pockethost/pockethost" rel="noreferrer">
<img
src="https://img.shields.io/github/stars/pockethost/pockethost"
width="88"
height="20"
alt="GitHub stars"
/>
</a>
</li>
{/if}
</ul>
<style>
.menu :where(li ul)::before {
width: 0;
}
</style>
</style>