socials

packages/dashboard/src/routes/Navbar/Navbar.svelte

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

packages/dashboard/src/routes/Navbar/NavbarMenu.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
   import { client } from '$src/pocketbase-client'
-  import UserHasRole from "$components/guards/UserHasRole.svelte"
+  import UserHasRole from '$components/guards/UserHasRole.svelte'
-  import UserLoggedIn from "$components/guards/UserLoggedIn.svelte"
+  import UserLoggedIn from '$components/guards/UserLoggedIn.svelte'
-  import UserLoggedOut from "$components/guards/UserLoggedOut.svelte"
+  import UserLoggedOut from '$components/guards/UserLoggedOut.svelte'
-  import Avatar from "./Avatar.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">
+          <ul
-            <Avatar />
+            class="menu dropdown-content bg-base-300 rounded-box z-[1] mt-36 md:mt-24 w-52 p-2 shadow"
-
+          >
-            <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><a href="/account">Settings</a></li>
+            <li>
-              <li>
+              <button on:click={handleLogoutAndRedirect}>Logout</button>
-                <button on:click={handleLogoutAndRedirect}>Logout</button>
+            </li>
-              </li>
+          </ul>
-            </ul>
+        </div>
-          </div>
       </li>
     {/if}
   </UserLoggedIn>
@@ -67,18 +78,6 @@
       <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>