From daad02504f1937f89f9bb12d425fca80f9a5dd20 Mon Sep 17 00:00:00 2001
From: doggo <69658702+upsetdog@users.noreply.github.com>
Date: Sun, 29 Oct 2023 01:42:51 +0000
Subject: [PATCH] feat(web): added toggle for Sharing button in the sidebar
 (#4674)

* Added toggle for Sharing button in the sidebar

* fix: format

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../side-bar/side-bar.svelte                  | 36 ++++++++++---------
 .../sidebar-settings.svelte                   |  3 ++
 web/src/lib/stores/preferences.store.ts       |  2 ++
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index 6872e55b3d..464eba2994 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@@ -77,23 +77,25 @@
       <SideBarButton title="People" icon={mdiAccount} isSelected={$page.route.id === '/(user)/people'} />
     </a>
   {/if}
-  <a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
-    <SideBarButton
-      title="Sharing"
-      icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
-      isSelected={isSharingSelected}
-    >
-      <svelte:fragment slot="moreInformation">
-        {#await getAlbumCount()}
-          <LoadingSpinner />
-        {:then data}
-          <div>
-            <p>{data.shared.toLocaleString($locale)} Albums</p>
-          </div>
-        {/await}
-      </svelte:fragment>
-    </SideBarButton>
-  </a>
+  {#if $sidebarSettings.sharing}
+    <a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
+      <SideBarButton
+        title="Sharing"
+        icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
+        isSelected={isSharingSelected}
+      >
+        <svelte:fragment slot="moreInformation">
+          {#await getAlbumCount()}
+            <LoadingSpinner />
+          {:then data}
+            <div>
+              <p>{data.shared.toLocaleString($locale)} Albums</p>
+            </div>
+          {/await}
+        </svelte:fragment>
+      </SideBarButton>
+    </a>
+  {/if}
 
   <div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
     <p class="hidden p-6 group-hover:sm:block md:block">LIBRARY</p>
diff --git a/web/src/lib/components/user-settings-page/sidebar-settings.svelte b/web/src/lib/components/user-settings-page/sidebar-settings.svelte
index 816f519c8d..3ac2947f6b 100644
--- a/web/src/lib/components/user-settings-page/sidebar-settings.svelte
+++ b/web/src/lib/components/user-settings-page/sidebar-settings.svelte
@@ -10,6 +10,9 @@
       <div class="ml-4">
         <SettingSwitch title="People" subtitle="Display a link to People" bind:checked={$sidebarSettings.people} />
       </div>
+      <div class="ml-4">
+        <SettingSwitch title="Sharing" subtitle="Display a link to Sharing" bind:checked={$sidebarSettings.sharing} />
+      </div>
     </div>
   </div>
 </section>
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index a0fb3d8809..db11223ede 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -49,10 +49,12 @@ export interface AlbumViewSettings {
 
 export interface SidebarSettings {
   people: boolean;
+  sharing: boolean;
 }
 
 export const sidebarSettings = persisted<SidebarSettings>('sidebar-settings', {
   people: false,
+  sharing: true,
 });
 
 export enum AlbumViewMode {