feat(web): small responsivness improvements regarding mobile use (#2255)

* make sidebar load more fluid
use css before js kicks in
added xs breakpoint in tailwind config

* fix sidebar hr still showing if opened

* make share tab not overflow on mobile

* make user management tab responsive

* make jobs panel responsive

* fix format in tailwind config

* fix full width on large screens
use md breakpoint for w-[800px]

* show accessible name for all screens

* replace grid with flex-col

* replace all xs with sm

* remove isCollapsed completly
using only tailwinds group feature and sm and md breakpoints

* remove leftovers of isCollapsed
and make the settings content less stretched

* remove isCollapsed in layout and side-bar

* fix code style

---------

Co-authored-by: faupau03 <paul.paffe@gmx.net>
Co-authored-by: Alex <alex.tran1502@gmail.com>

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

@@ -14,8 +14,6 @@
 	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();
 		const { data: archivedCount } = await api.assetApi.getArchivedAssetCountByUserId();
@@ -74,7 +72,7 @@
 	};
 </script>
 
-<SideBarSection bind:isCollapsed>
+<SideBarSection>
 	<a
 		data-sveltekit-preload-data="hover"
 		data-sveltekit-noscroll
@@ -85,7 +83,6 @@
 			title="Photos"
 			logo={ImageOutline}
 			isSelected={$page.route.id === '/(user)/photos'}
-			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAssetCount()}
@@ -109,7 +106,6 @@
 			title="Explore"
 			logo={Magnify}
 			isSelected={$page.route.id === '/(user)/explore'}
-			{isCollapsed}
 		/>
 	</a>
 	<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
@@ -117,7 +113,6 @@
 			title="Sharing"
 			logo={AccountMultipleOutline}
 			isSelected={$page.route.id === '/(user)/sharing'}
-			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
@@ -131,18 +126,15 @@
 		</SideBarButton>
 	</a>
 
-	<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 class="text-xs dark:text-immich-dark-fg transition-all duration-200">
+		<p class="p-6 hidden md:block group-hover:sm:block">LIBRARY</p>
+		<hr class="mt-8 mb-[31px] mx-4 block md:hidden group-hover:sm: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()}
@@ -160,7 +152,6 @@
 			title="Albums"
 			logo={ImageAlbum}
 			isSelected={$page.route.id === '/(user)/albums'}
-			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getAlbumCount()}
@@ -178,7 +169,6 @@
 			title="Archive"
 			logo={ArchiveArrowDownOutline}
 			isSelected={$page.route.id === '/(user)/archive'}
-			{isCollapsed}
 		>
 			<svelte:fragment slot="moreInformation">
 				{#await getArchivedAssetsCount()}
@@ -195,6 +185,6 @@
 
 	<!-- Status Box -->
 	<div class="mb-6 mt-auto">
-		<StatusBox {isCollapsed} />
+		<StatusBox />
 	</div>
 </SideBarSection>