📱 Feat(frontend): move navbar for responsive on iOS

agentlabs-inc · Oct 19, 2023 · 719a8c0 · 719a8c0
1 parent 5ed1081
commit 719a8c0
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/frontend/src/lib/components/chat/chat.svelte b/frontend/src/lib/components/chat/chat.svelte
@@ -229,7 +229,7 @@
 	});
 </script>
 
-<div class="flex flex-col justify-between relative h-full">
+<div class="flex flex-col justify-between relative flex-grow">
 	<div
 		bind:this={chatElement}
 		class="absolute top-0 bottom-[80px] left-0 right-0 overflow-y-scroll bg-background-primary dark:bg-background-secondary-dark">

diff --git a/frontend/src/lib/components/common/navigation/left-nav/LeftNav.svelte b/frontend/src/lib/components/common/navigation/left-nav/LeftNav.svelte
@@ -48,11 +48,11 @@
 <svelte:body use:watchResize={handleResize} />
 
 <div
-	class="{widthClass} transition-all sticky flex flex-col h-[calc(100vh-60px)] top-0 overflow-y-hidden {$leftNavStore.isOpened
+	class="{widthClass} transition-all sticky flex flex-col h-screen top-0 overflow-y-hidden {$leftNavStore.isOpened
 		? 'border-r'
 		: ''} border-stroke-base dark:border-stroke-base-dark bg-background-secondary dark:bg-background-primary-dark">
 	<div
-		class="g-background-secondary dark:bg-background-primary-dark p-3 flex gap-3 items-center justify-between flex-shrink-0 border-b border-stroke-base dark:border-stroke-base-dark">
+		class="g-background-secondary dark:bg-background-primary-dark h-[60px] p-3 flex gap-3 items-center justify-between flex-shrink-0 border-b border-stroke-base dark:border-stroke-base-dark">
 		<Button fullWidth leftIcon={Plus} type="primary" on:click={handleNewChat} size="smaller"
 			>New chat</Button>
 		<Button

diff --git a/frontend/src/lib/components/common/navigation/top-nav/TopNav.svelte b/frontend/src/lib/components/common/navigation/top-nav/TopNav.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <div
-	class="shrink-0 bg-background-secondary dark:bg-background-primary-dark sticky top-0 flex justify-between items-center border-b border-stroke-base dark:border-stroke-base-dark h-[60px] z-20">
+	class="shrink-0 bg-background-secondary dark:bg-background-primary-dark sticky top-0 flex justify-between items-center border-b border-stroke-base dark:border-stroke-base-dark h-[60px] z-20 shrink-0">
 	<div class="pl-5 flex items-center gap-2">
 		<div class={$leftNavStore.isOpened ? "hidden" : "block"}>
 			<Button

diff --git a/frontend/src/routes/chat/+layout.svelte b/frontend/src/routes/chat/+layout.svelte
@@ -16,10 +16,10 @@
 		<RealtimeContext>
 			<div
 				class="bg-background-primary dark:bg-background-primary-dark h-screen flex flex-col">
-				<TopNav />
 				<div class="flex flex-row flex-grow">
 					<LeftNav />
-					<div class="flex-grow">
+					<div class="flex-grow flex flex-col">
+						<TopNav />
 						<Chat />
 						<slot />
 					</div>