Fold menu options (#82)

* 增加折叠MenuOptions功能

* 增加折叠MenuOptions功能

* 改用tailwindcss编写样式

* 解构useState并显式标注类型

* 修改折叠图标的hover样式

* 为折叠状态添加持久化

* fix: bug

* rename foldMenuOptions to hideMenuOptions

* change file location

* transition + styling

* reordering

* update link

---------

Co-authored-by: Jing Hua <59118459+ztjhz@users.noreply.github.com>

src/assets/icons/ArrowBottom.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const ArrowBottom = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      viewBox='0 0 1024 1024'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      className='h-4 w-4'
+      width='1em'
+      height='1em'
+      {...props}
+    >
+      <path d='M140.16 332.16a40.96 40.96 0 0 0 0 58.24l343.04 338.56a40.96 40.96 0 0 0 58.24 0l342.4-338.56a40.96 40.96 0 1 0-58.24-58.24L512 640 197.76 332.16a40.96 40.96 0 0 0-57.6 0z'></path>
+    </svg>
+  );
+};
+
+export default ArrowBottom;

src/components/Menu/MenuOptions/CollapseOptions.tsx

@@ -0,0 +1,22 @@
+import ArrowBottom from '@icon/ArrowBottom';
+import useStore from '@store/store';
+
+const CollapseOptions = () => {
+  const setHideMenuOptions = useStore((state) => state.setHideMenuOptions);
+  const hideMenuOptions = useStore((state) => state.hideMenuOptions);
+
+  return (
+    <div
+      className={`fill-white hover:bg-gray-500/10 transition-colors duration-200 px-3 rounded-md cursor-pointer flex justify-center`}
+      onClick={() => setHideMenuOptions(!hideMenuOptions)}
+    >
+      <ArrowBottom
+        className={`h-3 w-3 transition-all duration-100 ${
+          hideMenuOptions ? 'rotate-180' : ''
+        }`}
+      />
+    </div>
+  );
+};
+
+export default CollapseOptions;

src/components/Menu/MenuOptions/Me.tsx

@@ -8,7 +8,7 @@ const Me = () => {
   return (
     <a
       className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
-      href='https://github.com/ztjhz'
+      href='https://github.com/ztjhz/BetterChatGPT'
       target='_blank'
     >
       <HeartIcon />

src/components/Menu/MenuOptions/MenuOptions.tsx

@@ -1,22 +1,31 @@
 import React from 'react';
+import useStore from '@store/store';
 
-import Account from './Account';
 import ClearConversation from './ClearConversation';
 import Api from './Api';
 import Me from './Me';
 import AboutMenu from '@components/AboutMenu';
 import ImportExportChat from '@components/ImportExportChat';
 import SettingsMenu from '@components/SettingsMenu';
+import CollapseOptions from './CollapseOptions';
 
 const MenuOptions = () => {
+  const hideMenuOptions = useStore((state) => state.hideMenuOptions);
   return (
     <>
+      <CollapseOptions />
+      <div
+        className={`${
+          hideMenuOptions ? 'max-h-0' : 'max-h-full'
+        } overflow-hidden transition-all`}
+      >
         <AboutMenu />
         <ClearConversation />
         <ImportExportChat />
         <Api />
         <SettingsMenu />
         <Me />
+      </div>
     </>
   );
 };

src/store/config-slice.ts

@@ -7,6 +7,7 @@ export interface ConfigSlice {
   openConfig: boolean;
   theme: Theme;
   autoTitle: boolean;
+  hideMenuOptions: boolean;
   defaultChatConfig: ConfigInterface;
   defaultSystemMessage: string;
   setOpenConfig: (openConfig: boolean) => void;
@@ -14,11 +15,13 @@ export interface ConfigSlice {
   setAutoTitle: (autoTitle: boolean) => void;
   setDefaultChatConfig: (defaultChatConfig: ConfigInterface) => void;
   setDefaultSystemMessage: (defaultSystemMessage: string) => void;
+  setHideMenuOptions: (hideMenuOptions: boolean) => void;
 }
 
 export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
   openConfig: false,
   theme: 'dark',
+  hideMenuOptions: false,
   autoTitle: false,
   defaultChatConfig: _defaultChatConfig,
   defaultSystemMessage: _defaultSystemMessage,
@@ -52,4 +55,10 @@ export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
       defaultSystemMessage: defaultSystemMessage,
     }));
   },
+  setHideMenuOptions: (hideMenuOptions: boolean) => {
+    set((prev: ConfigSlice) => ({
+      ...prev,
+      hideMenuOptions: hideMenuOptions,
+    }));
+  },
 });

src/store/store.ts

@@ -55,6 +55,7 @@ const useStore = create<StoreState>()(
         prompts: state.prompts,
         defaultChatConfig: state.defaultChatConfig,
         defaultSystemMessage: state.defaultSystemMessage,
+        hideMenuOptions: state.hideMenuOptions,
         firstVisit: state.firstVisit,
       }),
       version: 6,