Navigation collapse (#893)

* add collapse behaviour

* add collapsedNavigation setting

* Revert "add collapsedNavigation setting"

This reverts commit 6c9baf4.

* last tweaks

* rm unused

* Update src/lib/components/ExpandNavigation.svelte

Co-authored-by: Mishig <mishig.davaadorj@coloradocollege.edu>

---------

Co-authored-by: Mishig <mishig.davaadorj@coloradocollege.edu>

Author: gary149

src/lib/components/ExpandNavigation.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let isCollapsed: boolean;
+	export let classNames: string;
+</script>
+
+<button
+	on:click
+	class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-300 max-md:hidden dark:*:hover:bg-gray-600 {!isCollapsed
+		? '*:bg-gray-200/70 dark:*:bg-gray-800'
+		: '*:bg-gray-200 dark:*:bg-gray-700'}"
+>
+	<div class={!isCollapsed ? "group-hover:rotate-[20deg]" : "group-hover:-rotate-[20deg]"} />
+	<div class={!isCollapsed ? "group-hover:-rotate-[20deg]" : "group-hover:rotate-[20deg]"} />
+</button>

src/lib/components/chat/ChatMessage.svelte

@@ -111,7 +111,7 @@
 				if (contentEl) {
 					loadingEl = new IconLoading({
 						target: deepestChild(contentEl),
-						props: { classNames: "loading inline ml-2" },
+						props: { classNames: "loading inline ml-2 first:ml-0" },
 					});
 				}
 			}, 600);

src/routes/+layout.svelte

@@ -1,31 +1,37 @@
 <script lang="ts">
+	import "../styles/main.css";
+
 	import { onDestroy } from "svelte";
 	import { goto, invalidate } from "$app/navigation";
-	import { page } from "$app/stores";
-	import "../styles/main.css";
 	import { base } from "$app/paths";
+	import { page } from "$app/stores";
+	import { browser } from "$app/environment";
+
 	import {
 		PUBLIC_APP_DESCRIPTION,
 		PUBLIC_ORIGIN,
 		PUBLIC_PLAUSIBLE_SCRIPT_URL,
 	} from "$env/static/public";
+	import { PUBLIC_APP_ASSETS, PUBLIC_APP_NAME } from "$env/static/public";
+
+	import { error } from "$lib/stores/errors";
+	import { createSettingsStore } from "$lib/stores/settings";
 
 	import { shareConversation } from "$lib/shareConversation";
 	import { UrlDependency } from "$lib/types/UrlDependency";
-	import { error } from "$lib/stores/errors";
 
-	import MobileNav from "$lib/components/MobileNav.svelte";
-	import NavMenu from "$lib/components/NavMenu.svelte";
 	import Toast from "$lib/components/Toast.svelte";
-	import { PUBLIC_APP_ASSETS, PUBLIC_APP_NAME } from "$env/static/public";
+	import NavMenu from "$lib/components/NavMenu.svelte";
+	import MobileNav from "$lib/components/MobileNav.svelte";
 	import titleUpdate from "$lib/stores/titleUpdate";
-	import { createSettingsStore } from "$lib/stores/settings";
-	import { browser } from "$app/environment";
 	import DisclaimerModal from "$lib/components/DisclaimerModal.svelte";
+	import ExpandNavigation from "$lib/components/ExpandNavigation.svelte";
 
 	export let data;
 
 	let isNavOpen = false;
+	let isNavCollapsed = false;
+
 	let errorToastTimeout: ReturnType<typeof setTimeout>;
 	let currentError: string | null;
 
@@ -176,8 +182,18 @@
 	<DisclaimerModal />
 {/if}
 
+<ExpandNavigation
+	isCollapsed={isNavCollapsed}
+	on:click={() => (isNavCollapsed = !isNavCollapsed)}
+	classNames="absolute inset-y-0 z-10 my-auto {!isNavCollapsed
+		? 'left-[280px]'
+		: 'left-0'} *:transition-transform"
+/>
+
 <div
-	class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd md:grid-cols-[280px,1fr] md:grid-rows-[1fr] dark:text-gray-300"
+	class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
+		? 'md:grid-cols-[280px,1fr]'
+		: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] md:grid-rows-[1fr] dark:text-gray-300"
 >
 	<MobileNav isOpen={isNavOpen} on:toggle={(ev) => (isNavOpen = ev.detail)} title={mobileNavTitle}>
 		<NavMenu
@@ -189,7 +205,9 @@
 			on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
 		/>
 	</MobileNav>
-	<nav class="grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] max-md:hidden">
+	<nav
+		class=" grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[280px] max-md:hidden"
+	>
 		<NavMenu
 			conversations={data.conversations}
 			user={data.user}

src/routes/settings/+layout.svelte

@@ -33,7 +33,7 @@
 </script>
 
 <div
-	class="fixed inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
+	class="fixed inset-0 z-20 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
 	in:fade
 >
 	<dialog
@@ -42,7 +42,7 @@
 		use:clickOutside={() => {
 			goto(previousPage);
 		}}
-		class="xl: z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-8 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1200px] 2xl:h-[70dvh]"
+		class="grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-8 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1200px] 2xl:h-[70dvh]"
 	>
 		<div class="col-span-1 mb-4 flex items-center justify-between md:col-span-3">
 			<h2 class="text-xl font-bold">Settings</h2>