alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-25 19:43:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: improvements

Browse source
This commit is contained in:
Jing Hua 2023-03-05 01:33:46 +08:00
parent 9bc839917e
commit 5d11cfa343
4 changed files with 38 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Chat/ChatContent/ChatContent.tsx
View file

@ -66,7 +66,7 @@ const ChatContent = () => {
Submit
</button>
</div>
<div className='w-full h-32 md:h-48 flex-shrink-0'></div>
<div className='w-full h-10'></div>
</div>
</ScrollToBottom>
</div>

8
src/components/Chat/ChatContent/ScrollToBottomButton.tsx
View file

@ -1,13 +1,17 @@
import React from 'react';
import { useScrollToBottom } from 'react-scroll-to-bottom';
import { useAtBottom, useScrollToBottom } from 'react-scroll-to-bottom';
import DownArrow from '@icon/DownArrow';
const ScrollToBottomButton = () => {
const scrollToBottom = useScrollToBottom();
const [atBottom] = useAtBottom();
return (
<button
className='cursor-pointer absolute right-6 bottom-[60px] md:bottom-[60px] z-10 rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200'
className={`cursor-pointer absolute right-6 bottom-[60px] md:bottom-[60px] z-10 rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 ${
atBottom ? 'hidden' : ''
}`}
onClick={scrollToBottom}
>
<DownArrow />

53
src/components/Menu/Menu.tsx
View file

@ -7,32 +7,39 @@ import CrossIcon2 from '@icon/CrossIcon2';
const Menu = () => {
return (
<div
id='menu'
className='dark bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col max-md:translate-x-[-100%] max-md:fixed max-md:transition-transform max-md:z-[999] max-md:top-0 max-md:left-0 max-md:h-full'
>
<div className='flex h-full min-h-0 flex-col '>
<div className='scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20'>
<nav className='flex h-full flex-1 flex-col space-y-1 p-2'>
<NewChat />
<ChatHistoryList />
<MenuOptions />
</nav>
<>
<div
id='menu'
className='dark bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col max-md:translate-x-[-100%] max-md:fixed max-md:transition-transform max-md:z-[999] max-md:top-0 max-md:left-0 max-md:h-full max-md:w-3/4'
>
<div className='flex h-full min-h-0 flex-col '>
<div className='scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20'>
<nav className='flex h-full flex-1 flex-col space-y-1 p-2'>
<NewChat />
<ChatHistoryList />
<MenuOptions />
</nav>
</div>
</div>
<div
id='menu-close'
className='hidden md:hidden absolute z-[999] right-0 translate-x-full top-10 bg-gray-900 p-2 cursor-pointer hover:bg-black text-white'
onClick={() => {
document
.getElementById('menu')
?.classList.remove('max-md:translate-x-[0%]');
document.getElementById('menu-close')?.classList.add('hidden');
document.getElementById('menu-backdrop')?.classList.add('hidden');
}}
>
<CrossIcon2 />
</div>
</div>
<div
id='menu-close'
className='hidden md:hidden absolute z-[999] right-0 translate-x-full top-10 bg-gray-900 p-2 cursor-pointer hover:bg-black text-white'
onClick={() => {
document
.getElementById('menu')
?.classList.remove('max-md:translate-x-[0%]');
document.getElementById('menu-close')?.classList.add('hidden');
}}
>
<CrossIcon2 />
</div>
</div>
id='menu-backdrop'
className='hidden md:hidden fixed top-0 left-0 h-full w-full z-[60] bg-gray-900/70'
/>
</>
);
};

1
src/components/MobileBar/MobileBar.tsx
View file

@ -20,6 +20,7 @@ const MobileBar = () => {
.getElementById('menu')
?.classList.add('max-md:translate-x-[0%]');
document.getElementById('menu-close')?.classList.remove('hidden');
document.getElementById('menu-backdrop')?.classList.remove('hidden');
}}
>
<span className='sr-only'>Open sidebar</span>