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 <[email protected]>

---------

Co-authored-by: Mishig <[email protected]>

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>