More responsive web frontend (#2245)

* collapsable menu in web, more mobile friendly

* finished sidebar collapsing

* make navigation bar more responsive

* make search bar and admin button more responsive

* fix administration small button coloring

* fix upload button over opened search bar

* open search directly on small devices

* make admin sidebar more responsive

* add small edge to admin content

* server stats more responsive

* fix eslint errors

* server stats flex wrap

* Delete .env

* Revert change in hooks.server.ts

* Revert change in vite.config.js

* little clean up, replace {``} with ""

* remove package-lock.json in root folder

* revert upload button to linkbutton

* show extended sidebar also on focus

* combine changes in side-bar.svelte and
+layout.svelte to side-bar-section

* fix navigation-bar cog color in light theme

---------

Co-authored-by: Paul Paffe <paul.paffe@gmx.net>

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

@@ -16,7 +16,9 @@
 	import { goto } from '$app/navigation';
 	import { AppRoute } from '../../lib/constants';
 	import type { LayoutData } from './$types';
+	import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
 
+	let isCollapsed: boolean;
 	export let data: LayoutData;
 
 	// Circumvents the need to import the page store. Should be replaced by
@@ -40,36 +42,40 @@
 <NavigationBar user={data.user} />
 
 <main>
-	<section class="grid grid-cols-[250px_auto] pt-[72px] h-screen">
-		<section id="admin-sidebar" class="pt-8 pr-6 flex flex-col gap-1">
+	<section class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] pt-[72px] h-screen">
+		<SideBarSection bind:isCollapsed>
 			<SideBarButton
 				title="Users"
 				logo={AccountMultipleOutline}
 				isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
 				on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
+				{isCollapsed}
 			/>
 			<SideBarButton
 				title="Jobs"
 				logo={Sync}
 				isSelected={data.routeId === AppRoute.ADMIN_JOBS}
 				on:selected={() => goto(AppRoute.ADMIN_JOBS)}
+				{isCollapsed}
 			/>
 			<SideBarButton
 				title="Settings"
 				logo={Cog}
 				isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
 				on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
+				{isCollapsed}
 			/>
 			<SideBarButton
 				title="Server Stats"
 				logo={Server}
 				isSelected={data.routeId === AppRoute.ADMIN_STATS}
 				on:selected={() => goto(AppRoute.ADMIN_STATS)}
+				{isCollapsed}
 			/>
 			<div class="mb-6 mt-auto">
-				<StatusBox />
+				<StatusBox {isCollapsed} />
 			</div>
-		</section>
+		</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">
@@ -79,7 +85,7 @@
 				<hr class="dark:border-immich-dark-gray" />
 			</div>
 
-			<section id="setting-content" class="flex place-content-center">
+			<section id="setting-content" class="flex place-content-center mx-2">
 				<section class="w-[800px] pt-5 pb-28">
 					<slot />
 				</section>