moved navbar drawer trigger to topbar

frontend/src/routes/(app)/+layout.svelte

@@ -20,51 +20,16 @@
 </script>
 
 <div
-	class="flex overflow-hidden flex-col w-full h-screen max-h-screen max-w-screen">
+	class="max-w-screen flex h-screen max-h-screen w-full flex-col overflow-hidden">
-	<div class="flex border-b bg-muted/40">
+	<div class="bg-muted/40 flex border-b">
 		<div
-			class="flex gap-6 justify-between items-center py-2 px-4 w-full">
+			class="flex w-full items-center justify-between gap-2 px-4 py-2">
-			<UserIcon email={data.user.email} />
-
-			<div class="w-full">
-				<Breadcrumb.Root>
-					<Breadcrumb.List>
-						{#if $page.data.breadcrumbs}
-							{#each $page.data.breadcrumbs as breadcrumb, index}
-								{#if index == $page.data.breadcrumbs.length - 1}
-									<Breadcrumb.Item>
-										<Breadcrumb.Page href={breadcrumb.path}>
-											{breadcrumb.name}
-										</Breadcrumb.Page>
-									</Breadcrumb.Item>
-								{:else}
-									<Breadcrumb.Item>
-										<Breadcrumb.Link href={breadcrumb.path}>
-											{breadcrumb.name}
-										</Breadcrumb.Link>
-									</Breadcrumb.Item>
-								{/if}
-								{#if index != $page.data.breadcrumbs.length - 1}
-									<Breadcrumb.Separator />
-								{/if}
-							{/each}
-						{:else}
-							<Breadcrumb.Item>
-								<Breadcrumb.Link href={'/'}>Home</Breadcrumb.Link>
-							</Breadcrumb.Item>
-						{/if}
-					</Breadcrumb.List>
-				</Breadcrumb.Root>
-			</div>
-			<ThemeToggle />
-		</div>
-	</div>
-
-	<div
-		class="block py-2 px-4 w-full border-b lg:hidden bg-background">
 			<Sheet.Root bind:open={sheetOpen}>
 				<Sheet.Trigger asChild let:builder>
-				<Button builders={[builder]} variant="ghost" class="p-2">
+					<Button
+						builders={[builder]}
+						variant="ghost"
+						class="p-2 lg:hidden">
 						<Menu />
 					</Button>
 				</Sheet.Trigger>
@@ -72,7 +37,7 @@
 					<Sheet.Header class="pb-16">
 						<Sheet.Title>Shortener</Sheet.Title>
 					</Sheet.Header>
-				<div class="flex flex-col gap-4 grow">
+					<div class="flex grow flex-col gap-4">
 						<Button
 							on:click={closeSheet}
 							variant="ghost"
@@ -98,7 +63,7 @@
 						<div></div>
 						<div class="flex flex-col gap-4">
 							<Separator />
-						<div class="flex justify-between items-center">
+							<div class="flex items-center justify-between">
 								<UserIcon
 									email={data.user.email}
 									onClick={closeSheet} />
@@ -107,11 +72,45 @@
 					</div>
 				</Sheet.Content>
 			</Sheet.Root>
+			<UserIcon email={data.user.email} />
+
+			<div class="w-full">
+				<Breadcrumb.Root>
+					<Breadcrumb.List>
+						{#if $page.data.breadcrumbs}
+							{#each $page.data.breadcrumbs as breadcrumb, index}
+								{#if index == $page.data.breadcrumbs.length - 1}
+									<Breadcrumb.Item>
+										<Breadcrumb.Page href={breadcrumb.path}>
+											{breadcrumb.name}
+										</Breadcrumb.Page>
+									</Breadcrumb.Item>
+								{:else}
+									<Breadcrumb.Item>
+										<Breadcrumb.Link href={breadcrumb.path}>
+											{breadcrumb.name}
+										</Breadcrumb.Link>
+									</Breadcrumb.Item>
+								{/if}
+								{#if index != $page.data.breadcrumbs.length - 1}
+									<Breadcrumb.Separator />
+								{/if}
+							{/each}
+						{:else}
+							<Breadcrumb.Item>
+								<Breadcrumb.Link href={'/'}>Home</Breadcrumb.Link>
+							</Breadcrumb.Item>
+						{/if}
+					</Breadcrumb.List>
+				</Breadcrumb.Root>
+			</div>
+			<ThemeToggle />
+		</div>
 	</div>
 
-	<div class="flex overflow-hidden flex-grow">
+	<div class="flex flex-grow overflow-hidden">
 		<Sidebar class="hidden lg:flex" />
-		<div class="flex flex-col w-full h-auto">
+		<div class="flex h-auto w-full flex-col">
 			<slot />
 		</div>
 	</div>