ui: sidebar should always be visible on large screens

Author: mrdjohnson

src/components/FunTitle.tsx

@@ -25,8 +25,8 @@ const xWords = [
   'X',
 ]
 
-const FunTitle = ({ className }: { className?: string }) => {
-  const funTitle = settingStore.funTitle ?? 'X'
+const FunTitle = ({ className, allowFun = true }: { className?: string; allowFun?: boolean }) => {
+  const funTitle = allowFun ? settingStore.funTitle ?? 'X' : 'X'
 
   const titleSections = useMemo<[string, string, string]>(() => {
     return funTitle?.split(/([xX])/g) as [string, string, string]

src/components/Navbar.tsx

@@ -5,6 +5,7 @@ import PersonaSelector from '~/components/PersonaSelector'
 import ModelRefreshButton from '~/components/ModelRefreshButton'
 import FunTitle from '~/components/FunTitle'
 import KeyboardTooltip from '~/components/KeyboardToolTip'
+import { twMerge } from 'tailwind-merge'
 
 import Bars3 from '~/icons/Bars3'
 import Search from '~/icons/Search'
@@ -14,37 +15,55 @@ import Create from '~/icons/Create'
 
 import { settingStore } from '~/core/setting/SettingStore'
 import { chatStore } from '~/core/chat/ChatStore'
+import { Divider } from '@heroui/react'
 
 const Navbar = () => {
+  const isSidebarOpen = settingStore.setting.isSidebarOpen
+
   return (
-    <div className="navbar mb-2 flex h-auto min-h-0 flex-row justify-between gap-3 bg-base-300 p-1 md:mb-0 md:flex-col md:p-0">
-      <div className="ml-2 hidden items-center pr-2 md:flex md:text-xl">
-        <KeyboardTooltip
-          command="$mod+B"
-          placement="bottom"
-          showArrow={false}
-          className="-mt-2"
-          title="Toggle Sidebar"
-        >
-          <button
-            className="absolute left-2 text-base-content/30 transition-colors duration-100 ease-in-out hover:text-base-content/80"
-            onClick={() => settingStore.toggleSideBar()}
+    <div className="mb-2 flex h-auto min-h-0 flex-row justify-between gap-3 p-1 md:mb-0 md:flex-col md:p-0">
+      <div className=" hidden items-center md:flex md:text-xl">
+        {isSidebarOpen && (
+          <KeyboardTooltip
+            command="$mod+B"
+            placement="bottom"
+            showArrow={false}
+            className="-mt-2"
+            title="Toggle Sidebar"
           >
-            <ShrinkHorizontal />
-          </button>
-        </KeyboardTooltip>
+            <button
+              className="absolute left-2 text-base-content/30 transition-colors duration-100 ease-in-out hover:text-base-content/80"
+              onClick={() => settingStore.toggleSideBar()}
+            >
+              <ShrinkHorizontal />
+            </button>
+          </KeyboardTooltip>
+        )}
 
-        <FunTitle className="md:text-xl" />
+        <FunTitle className="w-full text-balance text-center md:text-xl" allowFun={isSidebarOpen} />
       </div>
 
-      <div className="w-full max-w-[600px] flex-row gap-2 md:flex md:flex-1">
-        <ModelSelector />
-        <ModelRefreshButton />
-      </div>
+      {isSidebarOpen ? (
+        <>
+          <div className="w-full max-w-[600px] flex-row gap-2 md:flex md:flex-1">
+            <ModelSelector />
+            <ModelRefreshButton />
+          </div>
 
-      <PersonaSelector />
+          <PersonaSelector />
+        </>
+      ) : (
+        <Divider className="bg-base-content/15" />
+      )}
 
-      <div className="flex w-fit flex-row gap-2 md:w-full md:justify-evenly">
+      <div
+        className={twMerge(
+          'flex w-fit gap-2 md:w-full ',
+          settingStore.setting.isSidebarOpen
+            ? 'flex-row md:justify-evenly'
+            : 'flex-col items-center',
+        )}
+      >
         <KeyboardTooltip
           command="$mod+Shift+O"
           placement="bottom"
@@ -79,7 +98,7 @@ const Navbar = () => {
           command="$mod+/"
           placement="bottom"
           showArrow={false}
-          className="-mt-2"
+          className="mt-auto"
           title="Settings"
         >
           <NavLink

src/containers/SideBar.tsx

@@ -13,10 +13,7 @@ import { Divider } from '@heroui/react'
 
 import KeyboardTooltip from '~/components/KeyboardToolTip'
 
-export type AccordionSectionProps = {
-  isOpen: boolean
-  onSectionClicked: () => void
-}
+export type AccordionSectionProps = { isOpen: boolean; onSectionClicked: () => void }
 
 export const SideBar = () => {
   const [openSectionType, setOpenSectionType] = useState<'chatList' | 'chat'>('chatList')
@@ -32,7 +29,9 @@ export const SideBar = () => {
       return 'w-full'
     }
 
-    return 'transition-[width] duration-300 ease-in-out ' + (isSidebarOpen ? ' w-[260px]' : ' w-0')
+    return (
+      'transition-[width] duration-300 ease-in-out ' + (isSidebarOpen ? ' w-[260px]' : ' w-[66px]')
+    )
   }, [isMobile, isSidebarOpen])
 
   const goToChat = () => {
@@ -51,22 +50,21 @@ export const SideBar = () => {
 
   return (
     <nav className={twMerge('group/sidebar relative h-full', width)}>
-      <div
-        className={twMerge(
-          'flex h-full flex-1 flex-col flex-nowrap gap-2 self-stretch bg-base-300 p-2 transition-opacity duration-150 ease-in-out',
-          isSidebarOpen || isMobile ? 'opacity-100' : 'pointer-events-none -z-10 opacity-0',
-        )}
-      >
+      <div className="flex h-full flex-1 flex-col flex-nowrap gap-2 self-stretch bg-base-300 p-2">
         <div className="hidden md:block">
           <Navbar />
         </div>
 
-        <Divider className="bg-base-content/15" />
+        {isSidebarOpen && (
+          <>
+            <Divider className="bg-base-content/15" />
 
-        {openSectionType === 'chat' && setting.selectedChatId ? (
-          <ChatSettingsSection onBackClicked={goToChatList} />
-        ) : (
-          <ChatListSection onChatSelected={goToChat} />
+            {openSectionType === 'chat' && setting.selectedChatId ? (
+              <ChatSettingsSection onBackClicked={goToChatList} />
+            ) : (
+              <ChatListSection onChatSelected={goToChat} />
+            )}
+          </>
         )}
       </div>