Merge pull request #1792 from insoutt/hide-sidebar-on-resize

Hide the sidebar when resizing the window
This commit is contained in:
Timothy Jaeryang Baek 2024-04-27 11:59:44 -07:00 committed by GitHub
commit 99a43cc998
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 5 deletions

View File

@ -29,6 +29,7 @@
import ArchiveBox from '../icons/ArchiveBox.svelte'; import ArchiveBox from '../icons/ArchiveBox.svelte';
import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte'; import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte';
const BREAKPOINT = 1024;
let show = false; let show = false;
let navElement; let navElement;
@ -49,9 +50,7 @@
let isEditing = false; let isEditing = false;
onMount(async () => { onMount(async () => {
if (window.innerWidth > 1024) { show = window.innerWidth > BREAKPOINT;
show = true;
}
await chats.set(await getChatList(localStorage.token)); await chats.set(await getChatList(localStorage.token));
let touchstartX = 0; let touchstartX = 0;
@ -79,12 +78,20 @@
checkDirection(); checkDirection();
}; };
const onResize = () => {
if(show && window.innerWidth < BREAKPOINT) {
show = false;
}
}
document.addEventListener('touchstart', onTouchStart); document.addEventListener('touchstart', onTouchStart);
document.addEventListener('touchend', onTouchEnd); document.addEventListener('touchend', onTouchEnd);
window.addEventListener('resize', onResize);
return () => { return () => {
document.removeEventListener('touchstart', onTouchStart); document.removeEventListener('touchstart', onTouchStart);
document.removeEventListener('touchend', onTouchEnd); document.removeEventListener('touchend', onTouchEnd);
document.removeEventListener('resize', onResize);
}; };
}); });
@ -473,14 +480,14 @@
<div <div
class=" class="
{chat.id === $chatId || chat.id === chatTitleEditId || chat.id === chatDeleteId {chat.id === $chatId || chat.id === chatTitleEditId || chat.id === chatDeleteId
? 'from-gray-300 dark:from-gray-900' ? 'from-gray-300 dark:from-gray-900'
: chat.id === selectedChatId : chat.id === selectedChatId
? 'from-gray-100 dark:from-gray-950' ? 'from-gray-100 dark:from-gray-950'
: 'invisible group-hover:visible from-gray-100 dark:from-gray-950'} : 'invisible group-hover:visible from-gray-100 dark:from-gray-950'}
absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80% absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80%
to-transparent" to-transparent"
> >
{#if chatTitleEditId === chat.id} {#if chatTitleEditId === chat.id}