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-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 @@
 <div
 	on:click={onButtonClicked}
 	on:keydown={onButtonClicked}
-	class={`flex gap-4 justify-between place-items-center w-full px-5 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
-    ${
-			isSelected
-				? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
-				: ''
-		}
-  `}
+	class="flex gap-4 justify-between place-items-center w-full transition-[padding] delay-100 duration-100 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
+    {isSelected
+		? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
+		: ''}
+		{isCollapsed ? 'pl-5' : 'px-5'}
+  "
 >
-	<div class="flex gap-4 place-items-center w-full">
-		<svelte:component this={logo} size="1.5em" />
+	<div class="flex gap-4 place-items-center w-full overflow-hidden">
+		<svelte:component this={logo} size="1.5em" class="shrink-0" />
 		<p class="font-medium text-sm">{title}</p>
 	</div>
 
-	{#if $$slots.moreInformation}
-		<div
-			class="relative flex justify-center select-none cursor-default"
-			on:mouseenter={() => (showMoreInformation = true)}
-			on:mouseleave={() => (showMoreInformation = false)}
-		>
-			<div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
-				<InformationOutline />
-			</div>
-
-			{#if showMoreInformation}
-				<div class="absolute left-6 top-0 z-20">
-					<div
-						class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
-						class:hidden={!showMoreInformation}
-						transition:fade={{ duration: 200 }}
-					>
-						<slot name="moreInformation" />
-					</div>
+	<div
+		class="transition-[height] duration-100 delay-200 {isCollapsed ? 'height-0' : 'height-auto'}"
+	>
+		{#if $$slots.moreInformation && !isCollapsed}
+			<div
+				class="relative flex justify-center select-none cursor-default"
+				on:mouseenter={() => (showMoreInformation = true)}
+				on:mouseleave={() => (showMoreInformation = false)}
+			>
+				<div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
+					<InformationOutline />
 				</div>
-			{/if}
-		</div>
-	{/if}
+
+				{#if showMoreInformation}
+					<div class="absolute left-6 top-0 z-20">
+						<div
+							class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
+							class:hidden={!showMoreInformation}
+							transition:fade={{ duration: 200 }}
+						>
+							<slot name="moreInformation" />
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
 </div>

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>

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 @@
 	};
 </script>
 
-<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6 bg-immich-bg dark:bg-immich-dark-bg">
+<SideBarSection bind:isCollapsed>
 	<a
 		data-sveltekit-preload-data="hover"
 		data-sveltekit-noscroll
@@ -82,6 +85,7 @@
 			title="Photos"
 			logo={ImageOutline}
 			isSelected={$page.route.id === '/(user)/photos'}
+			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAssetCount()}
@@ -105,6 +109,7 @@
 			title="Explore"
 			logo={Magnify}
 			isSelected={$page.route.id === '/(user)/explore'}
+			{isCollapsed}
 		/>
 	</a>
 	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
@@ -112,6 +117,7 @@
 			title="Sharing"
 			logo={AccountMultipleOutline}
 			isSelected={$page.route.id === '/(user)/sharing'}
+			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
@@ -125,14 +131,18 @@
 		</SideBarButton>
 	</a>
 
-	<div class="text-xs p-5 pb-2 dark:text-immich-dark-fg">
-		<p>LIBRARY</p>
+	<div
+		class="text-xs md:pb-2 md:p-5 p-6 pb-[1.2rem] dark:text-immich-dark-fg transition-all duration-200"
+	>
+		<p class={isCollapsed ? 'hidden' : 'block'}>LIBRARY</p>
+		<hr class={isCollapsed ? 'block mt-2 mb-[0.45rem]' : 'hidden'} />
 	</div>
 	<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
 		<SideBarButton
 			title="Favorites"
 			logo={StarOutline}
 			isSelected={$page.route.id == '/(user)/favorites'}
+			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getFavoriteCount()}
@@ -150,6 +160,7 @@
 			title="Albums"
 			logo={ImageAlbum}
 			isSelected={$page.route.id === '/(user)/albums'}
+			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
@@ -167,6 +178,7 @@
 			title="Archive"
 			logo={ArchiveArrowDownOutline}
 			isSelected={$page.route.id === '/(user)/archive'}
+			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getArchivedAssetsCount()}
@@ -183,6 +195,6 @@
 
 	<!-- Status Box -->
 	<div class="mb-6 mt-auto">
-		<StatusBox />
+		<StatusBox {isCollapsed} />
 	</div>
-</section>
+</SideBarSection>