+
IMMICH
-
-
+
+
+ Administration
+
+
+
+
+
-
+
+
+
+
+
+
{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
@@ -66,7 +79,7 @@
dispatch('uploadClicked')}>
- Upload
+ Upload
@@ -74,15 +87,32 @@
{#if user.isAdmin}
-
+
+
+
+
+
+
+
- Administration - - + ? 'block border-1 w-2/3 mx-auto border-immich-primary dark:border-immich-dark-primary' + : 'hidden'} + /> +
{/if}
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
index aafe3276e3..662b32e4c3 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
@@ -7,6 +7,7 @@
export let title: string;
export let logo: typeof Icon;
export let isSelected: boolean;
+ export let isCollapsed: boolean;
let showMoreInformation = false;
@@ -17,40 +18,43 @@
- Administration - - + ? 'block border-1 w-2/3 mx-auto border-immich-primary dark:border-immich-dark-primary' + : 'hidden'} + /> +
-
-
+
+
+ (innerWidth >= 430 ? (isCollapsed = false) : null)}
+ on:focus={() => (innerWidth >= 430 ? (isCollapsed = false) : null)}
+ on:mouseleave={() => handleResize()}
+ class="flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-[width] duration-200 z-10 {isCollapsed
+ ? 'w-[72px]'
+ : 'pr-6 w-64 shadow-2xl md:shadow-none md:border-none border-r dark:border-r-immich-dark-gray'}"
+>
+
+
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 2705ed086e..a7ac7d0c80 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
@@ -12,6 +12,9 @@
import StatusBox from '../status-box.svelte';
import SideBarButton from './side-bar-button.svelte';
import { locale } from '$lib/stores/preferences.store';
+ import SideBarSection from './side-bar-section.svelte';
+
+ let isCollapsed: boolean;
const getAssetCount = async () => {
const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId();
@@ -71,7 +74,7 @@
};
-
+
{#await getAssetCount()}
@@ -105,6 +109,7 @@
title="Explore"
logo={Magnify}
isSelected={$page.route.id === '/(user)/explore'}
+ {isCollapsed}
/>
@@ -112,6 +117,7 @@
title="Sharing"
logo={AccountMultipleOutline}
isSelected={$page.route.id === '/(user)/sharing'}
+ {isCollapsed}
>
{#await getAlbumCount()}
@@ -125,14 +131,18 @@
-
+
- {#if $$slots.moreInformation}
- {title}
(showMoreInformation = true)}
- on:mouseleave={() => (showMoreInformation = false)}
- >
-
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
new file mode 100644
index 0000000000..a4429d37bb
--- /dev/null
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
@@ -0,0 +1,32 @@
+
+
+
-
-
-
- {#if showMoreInformation}
-
-
-
-
+
+ {#if $$slots.moreInformation && !isCollapsed}
+
+ {/if}
+ (showMoreInformation = true)}
+ on:mouseleave={() => (showMoreInformation = false)}
+ >
+
- {/if}
+
+ {#if showMoreInformation}
+
+
- {/if}
-
+
+ {/if}
+
+
+
+