Add avatar fallback

src/app/components/PrimaryNav.svelte

@@ -81,6 +81,9 @@
   class="border-top fixed bottom-0 left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="content-padding-x content-sizing flex justify-between px-2">
     <div class="flex gap-2 sm:gap-8">
+      <PrimaryNavItem title="Home" href="/home">
+        <Avatar icon="home-smile" class="!h-10 !w-10" />
+      </PrimaryNavItem>
       <PrimaryNavItem title="Search" href="/people">
         <Avatar icon="magnifer" class="!h-10 !w-10" />
       </PrimaryNavItem>
@@ -98,7 +101,7 @@
       </PrimaryNavItem>
     </div>
     <PrimaryNavItem title="Settings" on:click={showSettingsMenu}>
-      <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
+      <Avatar icon="settings" src={$userProfile?.picture} class="!h-10 !w-10" />
     </PrimaryNavItem>
   </div>
 </div>

src/lib/components/Avatar.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
-  import cx from "classnames"
   import Icon from "@lib/components/Icon.svelte"
 
   export let src = ""
   export let size = 7
   export let icon = "user-rounded"
+
+  $: rem = size * 4
 </script>
 
-{#if src}
+<div
+  class="{$$props.class} relative !flex shrink-0 items-center justify-center overflow-hidden rounded-full"
+  style="width: {rem}px; height: {rem}px; min-width: {rem}px; {$$props.style || ''}">
+  <Icon {icon} size={Math.round(size * 0.8)} />
   <div
-    class={cx($$props.class, "shrink-0 overflow-hidden rounded-full bg-cover bg-center")}
+    class="absolute left-0 top-0 h-full w-full bg-cover bg-center"
-    style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; background-image: url(${src}); ${$$props.style || ""}`} />
+    style="background-image: url({src})" />
-{:else}
+</div>
-  <div
-    class={cx($$props.class, "center !flex rounded-full")}
-    style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; ${$$props.style || ""}`}>
-    <Icon {icon} size={Math.round(size * 0.8)} />
-  </div>
-{/if}