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/lib/components/shared-components/side-bar/side-bar-section.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	export let isCollapsed = true;
+	let innerWidth: number;
+
+	const handleResize = () => {
+		if (innerWidth > 768) {
+			isCollapsed = false;
+		} else {
+			isCollapsed = true;
+		}
+	};
+
+	onMount(() => {
+		handleResize();
+	});
+</script>
+
+<svelte:window on:resize={handleResize} bind:innerWidth />
+
+<section
+	id="sidebar"
+	on:mouseover={() => (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'}"
+>
+	<slot />
+</section>