refac: styling

src/lib/components/app/AppControls.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Plus from '$lib/components/icons/Plus.svelte';
+
+	let selected = 'home';
+</script>
+
+<div class="min-w-[4.5rem] bg-black flex gap-2.5 flex-col pt-10">
+	<div class="flex justify-center relative">
+		{#if selected === 'home'}
+			<div class="absolute top-0 left-0 flex h-full">
+				<div class="my-auto rounded-r-lg w-1 h-8 bg-white"></div>
+			</div>
+		{/if}
+
+		<Tooltip content="Home" placement="right">
+			<button
+				class=" cursor-pointer bg-gray-850 {selected === 'home' ? 'rounded-2xl' : 'rounded-full'}"
+				on:click={() => {
+					selected = 'home';
+				}}
+			>
+				<img
+					src="/static/splash.png"
+					class="size-11 dark:invert p-1"
+					alt="logo"
+					draggable="false"
+				/>
+			</button>
+		</Tooltip>
+	</div>
+
+	<div class="border-t border-gray-900 mx-3"></div>
+
+	<div class="flex justify-center relative group">
+		{#if selected === ''}
+			<div class="absolute top-0 left-0 flex h-full">
+				<div class="my-auto rounded-r-lg w-1 h-8 bg-white"></div>
+			</div>
+		{/if}
+		<button
+			class=" cursor-pointer bg-transparent"
+			onclick={() => {
+				selected = '';
+			}}
+		>
+			<img
+				src="/assets/images/adam.jpg"
+				class="size-11 {selected === '' ? 'rounded-2xl' : 'rounded-full'}"
+				alt="logo"
+				draggable="false"
+			/>
+		</button>
+	</div>
+
+	<div class="flex justify-center relative group text-gray-400">
+		<button class=" cursor-pointer p-2" onclick={() => {}}>
+			<Plus className="size-5" strokeWidth="2" />
+		</button>
+	</div>
+</div>

src/lib/components/channel/Channel.svelte

@@ -199,7 +199,7 @@
 </svelte:head>
 
 <div
-	class="h-screen max-h-[100dvh] {$showSidebar
+	class="h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
 		? 'md:max-w-[calc(100%-260px)]'
 		: ''} w-full max-w-full flex flex-col"
 	id="channel-container"

src/lib/components/chat/Chat.svelte

@@ -1831,9 +1831,9 @@
 
 {#if !chatIdProp || (loaded && chatIdProp)}
 	<div
-		class="h-screen max-h-[100dvh] {$showSidebar
-			? 'md:max-w-[calc(100%-260px)]'
-			: ''} w-full max-w-full flex flex-col"
+		class="h-screen max-h-[100dvh] transition-width duration-300 ease-in-out {$showSidebar
+			? '  md:max-w-[calc(100%-260px)]'
+			: ' '} w-full max-w-full flex flex-col"
 		id="chat-container"
 	>
 		{#if $settings?.backgroundImageUrl ?? null}

src/lib/components/layout/Sidebar.svelte

@@ -19,7 +19,8 @@
 		temporaryChatEnabled,
 		channels,
 		socket,
-		config
+		config,
+		isApp
 	} from '$lib/stores';
 	import { onMount, getContext, tick, onDestroy } from 'svelte';
 
@@ -426,7 +427,9 @@
 
 {#if $showSidebar}
 	<div
-		class=" fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
+		class=" {$isApp
+			? ' ml-[4.5rem] md:ml-0'
+			: ''} fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
 		on:mousedown={() => {
 			showSidebar.set(!$showSidebar);
 		}}
@@ -438,7 +441,9 @@
 	id="sidebar"
 	class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
 		? 'md:relative w-[260px] max-w-[260px]'
-		: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 overflow-x-hidden
+		: '-translate-x-[260px] w-[0px]'} {$isApp
+		? ' ml-[4.5rem] md:ml-0'
+		: 'transition-width duration-300 ease-in-out flex-shrink-0'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm fixed z-50 top-0 left-0 overflow-x-hidden
         "
 	data-state={$showSidebar}
 >