feat(web): use user layout on admin pages (#2550)

web/src/lib/components/layouts/user-page-layout.svelte

@@ -11,11 +11,7 @@
 
 <header>
 	{#if !hideNavbar}
-		<NavigationBar
+		<NavigationBar {user} {showUploadButton} on:uploadClicked={() => openFileUploadDialog()} />
-			{user}
-			shouldShowUploadButton={showUploadButton}
-			on:uploadClicked={() => openFileUploadDialog()}
-		/>
 	{/if}
 
 	<slot name="header" />
@@ -24,7 +20,9 @@
 <main
 	class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] relative pt-[var(--navbar-height)] h-screen overflow-hidden bg-immich-bg dark:bg-immich-dark-bg"
 >
+	<slot name="sidebar">
 		<SideBar />
+	</slot>
 	<slot name="content">
 		{#if title}
 			<section class="relative">

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -17,7 +17,7 @@
 	import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
 	import Cog from 'svelte-material-icons/Cog.svelte';
 	export let user: UserResponseDto;
-	export let shouldShowUploadButton = true;
+	export let showUploadButton = true;
 
 	let shouldShowAccountInfo = false;
 	let shouldShowAccountInfoPanel = false;
@@ -72,7 +72,7 @@
 
 				<ThemeButton />
 
-				{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
+				{#if !$page.url.pathname.includes('/admin') && showUploadButton}
 					<div in:fly={{ x: 50, duration: 250 }}>
 						<LinkButton on:click={() => dispatch('uploadClicked')}>
 							<div class="flex gap-2">

web/src/routes/admin/+layout.svelte

@@ -6,7 +6,6 @@
 	// This is an issue in SvelteKit caused by using the page store in layouts and
 	// using transitions on pages: https://github.com/sveltejs/kit/issues/7405
 
-	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
 	import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
 	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
 	import Sync from 'svelte-material-icons/Sync.svelte';
@@ -17,6 +16,7 @@
 	import { AppRoute } from '../../lib/constants';
 	import type { LayoutData } from './$types';
 	import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 
 	export let data: LayoutData;
 
@@ -38,13 +38,8 @@
 	};
 </script>
 
-<NavigationBar user={data.user} />
+<UserPageLayout user={data.user} showUploadButton={false} title={getPageTitle(data.routeId)}>
-
+	<SideBarSection slot="sidebar">
-<main>
-	<section
-		class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] pt-[var(--navbar-height)] h-screen"
-	>
-		<SideBarSection>
 		<SideBarButton
 			title="Users"
 			logo={AccountMultipleOutline}
@@ -74,19 +69,9 @@
 		</div>
 	</SideBarSection>
 
-		<section class="overflow-y-auto immich-scrollbar">
-			<div id="setting-title" class="pt-10 w-full bg-immich-bg dark:bg-immich-dark-bg">
-				<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
-					{getPageTitle(data.routeId)}
-				</h1>
-				<hr class="dark:border-immich-dark-gray" />
-			</div>
-
 	<section id="setting-content" class="flex place-content-center mx-4">
 		<section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
 			<slot />
 		</section>
 	</section>
-		</section>
+</UserPageLayout>
-	</section>
-</main>