From 62683d38a26e5b825d5441ec72c6c3d6a7a9440e Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Fri, 18 Oct 2024 14:37:38 -0700
Subject: [PATCH] Tweak navigation to show profile image at all times

---
 src/app/components/MenuSettings.svelte |  9 +-------
 src/app/components/PrimaryNav.svelte   | 30 ++++++++++++++++----------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/app/components/MenuSettings.svelte b/src/app/components/MenuSettings.svelte
index 21778ea..75b7d87 100644
--- a/src/app/components/MenuSettings.svelte
+++ b/src/app/components/MenuSettings.svelte
@@ -10,13 +10,6 @@
 </script>
 
 <div class="column menu gap-2">
-  <Link href="/settings/profile">
-    <CardButton>
-      <div slot="icon"><Icon icon="user-circle" size={7} /></div>
-      <div slot="title">Profile</div>
-      <div slot="info">Customize your profile</div>
-    </CardButton>
-  </Link>
   <Link href="/settings/relays">
     <CardButton>
       <div slot="icon"><Icon icon="remote-controller-minimalistic" size={7} /></div>
@@ -26,7 +19,7 @@
   </Link>
   <Link href="/settings">
     <CardButton>
-      <div slot="icon"><Icon icon="notes-minimalistic" size={7} /></div>
+      <div slot="icon"><Icon icon="settings" size={7} /></div>
       <div slot="title">Settings</div>
       <div slot="info">Get into the details about how Flotilla works</div>
     </CardButton>
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index ff3bae5..9b7df51 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -25,7 +25,7 @@
   <div class="flex h-full flex-col justify-between">
     <div>
       <PrimaryNavItem href="/home/people" class="tooltip-right">
-        <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
+        <Avatar icon="home-smile" class="!h-10 !w-10" />
       </PrimaryNavItem>
       {#each getMembershipUrls($userMembership) as url (url)}
         <PrimaryNavItem
@@ -43,7 +43,10 @@
       </PrimaryNavItem>
     </div>
     <div>
-      <PrimaryNavItem title="Settings" href="/settings/profile" class="tooltip-right">
+      <PrimaryNavItem title="Profile" href="/settings/profile" class="tooltip-right">
+        <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
+      </PrimaryNavItem>
+      <PrimaryNavItem title="Settings" href="/settings/relays" class="tooltip-right">
         <Avatar icon="settings" class="!h-10 !w-10" />
       </PrimaryNavItem>
     </div>
@@ -53,15 +56,20 @@
 <slot />
 
 <div class="fixed bottom-0 left-0 right-0 z-nav h-14 bg-base-100 md:hidden border border-top border-base-200">
-  <div class="m-auto flex max-w-sm justify-between px-2">
-    <PrimaryNavItem title="Home" on:click={showHomeMenu}>
-      <Avatar icon="home-smile" class="!h-10 !w-10" />
-    </PrimaryNavItem>
-    <PrimaryNavItem title="Spaces" on:click={showSpacesMenu}>
-      <SpaceAvatar />
-    </PrimaryNavItem>
-    <PrimaryNavItem title="Settings" on:click={showSettingsMenu}>
-      <Avatar icon="settings" class="!h-10 !w-10" />
+  <div class="m-auto flex max-w-md justify-between px-2">
+    <div class="flex gap-4 sm:gap-8">
+      <PrimaryNavItem title="Home" on:click={showHomeMenu}>
+        <Avatar icon="home-smile" class="!h-10 !w-10" />
+      </PrimaryNavItem>
+      <PrimaryNavItem title="Spaces" on:click={showSpacesMenu}>
+        <SpaceAvatar />
+      </PrimaryNavItem>
+      <PrimaryNavItem title="Settings" on:click={showSettingsMenu}>
+        <Avatar icon="settings" class="!h-10 !w-10" />
+      </PrimaryNavItem>
+    </div>
+    <PrimaryNavItem title="Settings" href="/settings/profile">
+      <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
     </PrimaryNavItem>
   </div>
 </div>