style: compact side menu

src/components/AboutMenu/AboutMenu.tsx

@@ -10,7 +10,7 @@ const AboutMenu = () => {
   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'
+        className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
         onClick={() => {
           setIsModalOpen(true);
         }}

src/components/ImportExportChat/ImportExportChat.tsx

@@ -22,7 +22,7 @@ const ImportExportChat = () => {
   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'
+        className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
         onClick={() => {
           setIsModalOpen(true);
         }}

src/components/Menu/ChatFolder.tsx

@@ -157,7 +157,7 @@ const ChatFolder = ({
         style={{ background: color || '' }}
         className={`${
           color ? '' : 'hover:bg-gray-850'
-        } transition-colors flex py-3 pl-3 pr-1 items-center gap-3 relative rounded-md break-all cursor-pointer parent-sibling`}
+        } transition-colors flex py-2 pl-2 pr-1 items-center gap-3 relative rounded-md break-all cursor-pointer parent-sibling`}
         onClick={toggleExpanded}
         ref={folderRef}
         onMouseEnter={() => {

src/components/Menu/ChatHistory.tsx

@@ -11,9 +11,9 @@ import useStore from '@store/store';
 
 const ChatHistoryClass = {
   normal:
-    'flex py-3 px-3 items-center gap-3 relative rounded-md bg-gray-900 hover:bg-gray-850 break-all hover:pr-4 group transition-opacity',
+    'flex py-2 px-2 items-center gap-3 relative rounded-md bg-gray-900 hover:bg-gray-850 break-all hover:pr-4 group transition-opacity',
   active:
-    'flex py-3 px-3 items-center gap-3 relative rounded-md break-all pr-14 bg-gray-800 hover:bg-gray-800 group transition-opacity',
+    'flex py-2 px-2 items-center gap-3 relative rounded-md break-all pr-14 bg-gray-800 hover:bg-gray-800 group transition-opacity',
   normalGradient:
     'absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-gray-900 group-hover:from-gray-850',
   activeGradient:

src/components/Menu/MenuOptions/Api.tsx

@@ -11,7 +11,7 @@ const Config = () => {
   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'
+        className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
         id='api-menu'
         onClick={() => setIsModalOpen(true)}
       >

src/components/Menu/MenuOptions/ClearConversation.tsx

@@ -22,7 +22,7 @@ const ClearConversation = () => {
   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'
+        className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
         onClick={() => {
           setIsModalOpen(true);
         }}

src/components/Menu/MenuOptions/Me.tsx

@@ -7,7 +7,7 @@ const Me = () => {
   const { t } = useTranslation();
   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'
+      className='flex py-2 px-2 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/BetterChatGPT'
       target='_blank'
     >

src/components/Menu/NewChat.tsx

@@ -20,7 +20,7 @@ const NewChat = ({ folder }: { folder?: string }) => {
       } ${
         folder
           ? 'justify-start'
-          : 'py-3 px-3 gap-3 md:mb-2 md:border md:border-white/20'
+          : 'py-2 px-2 gap-3 md:mb-2 md:border md:border-white/20'
       }`}
       onClick={() => {
         if (!generating) addChat(folder);
@@ -28,7 +28,7 @@ const NewChat = ({ folder }: { folder?: string }) => {
       title={folder ? String(t('newChat')) : ''}
     >
       {folder ? (
-        <div className='max-h-0 parent-sibling-hover:max-h-10 hover:max-h-10 parent-sibling-hover:py-3 hover:py-3 px-3 overflow-hidden transition-all duration-200 delay-500 text-sm flex gap-3 items-center text-gray-100'>
+        <div className='max-h-0 parent-sibling-hover:max-h-10 hover:max-h-10 parent-sibling-hover:py-2 hover:py-2 px-2 overflow-hidden transition-all duration-200 delay-500 text-sm flex gap-3 items-center text-gray-100'>
           <PlusIcon /> {t('newChat')}
         </div>
       ) : (

src/components/SettingsMenu/SettingsMenu.tsx

@@ -23,7 +23,7 @@ const SettingsMenu = () => {
   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'
+        className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
         onClick={() => {
           setIsModalOpen(true);
         }}