opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-29 10:13:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement responsive sidebar

Browse Source
This commit is contained in:
steven
2023-03-24 17:01:28 +08:00
parent 0218a9c065
commit 7f2cc8890a
6 changed files with 158 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/ChatView/Header.tsx
View File

@ -12,15 +12,18 @@ const Header = () => {
}, [title]);
return (
<div className="sticky top-0 w-full grid grid-cols-3 py-2 border-b bg-white">
<div className="ml-4 relative flex justify-center">
<Icon.Io.IoIosMenu className="text-gray-600 w-5 h-auto block sm:hidden" />
<div className="sticky top-0 w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-2 border-b bg-white">
<div className="ml-2 flex justify-center items-center">
<label htmlFor="connection-drawer" className="w-8 h-8 p-1 mr-1 block lg:hidden rounded-md cursor-pointer hover:bg-gray-100">
<Icon.Io.IoIosMenu className="text-gray-600 w-full h-auto" />
</label>
<span className="w-auto text-left block lg:hidden">{title}</span>
</div>
<span className="w-auto text-center">{title}</span>
<div className="sm:mr-4 relative flex flex-row justify-end items-center">
<span className="w-auto text-center h-8 p-1 hidden lg:block">{title}</span>
<div className="mr-2 sm:mr-4 relative flex flex-row justify-end items-center">
<a
href="https://www.bytebase.com?source=sqlchat"
className="flex flex-row justify-center items-center px-2 py-1 rounded-md hover:bg-gray-100 hover:shadow"
className="flex flex-row justify-center items-center px-2 py-1 rounded-md whitespace-nowrap hover:bg-gray-100 hover:shadow"
target="_blank"
>
<span className="text-sm text-gray-600 hidden sm:block">Crafted by</span>