Add collapsible sidebar (#68)

- Sidebar can collapse by menu option or dragging

src/renderer/features/titlebar/components/app-menu.tsx

@@ -3,10 +3,14 @@ import { openModal, closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
 import {
   RiLockLine,
-  RiServerFill,
-  RiEdit2Fill,
-  RiSettings3Fill,
   RiWindowFill,
+  RiArrowLeftSLine,
+  RiArrowRightSLine,
+  RiLayoutRightLine,
+  RiLayoutLeftLine,
+  RiEdit2Line,
+  RiSettings3Line,
+  RiServerLine,
 } from 'react-icons/ri';
 import { useNavigate } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -14,7 +18,13 @@ import { DropdownMenu } from '/@/renderer/components';
 import { ServerList } from '/@/renderer/features/servers';
 import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer, useServerList, useAuthStoreActions } from '/@/renderer/store';
+import {
+  useCurrentServer,
+  useServerList,
+  useAuthStoreActions,
+  useSidebarStore,
+  useAppStoreActions,
+} from '/@/renderer/store';
 import { ServerListItem, ServerType } from '/@/renderer/types';
 
 const browser = isElectron() ? window.electron.browser : null;
@@ -24,6 +34,8 @@ export const AppMenu = () => {
   const currentServer = useCurrentServer();
   const serverList = useServerList();
   const { setCurrentServer } = useAuthStoreActions();
+  const { collapsed } = useSidebarStore();
+  const { setSideBar } = useAppStoreActions();
 
   const handleSetCurrentServer = (server: ServerListItem) => {
     navigate(AppRoute.HOME);
@@ -55,6 +67,14 @@ export const AppMenu = () => {
     browser?.devtools();
   };
 
+  const handleCollapseSidebar = () => {
+    setSideBar({ collapsed: true });
+  };
+
+  const handleExpandSidebar = () => {
+    setSideBar({ collapsed: false });
+  };
+
   const showBrowserDevToolsButton = isElectron();
 
   return (
@@ -70,7 +90,7 @@ export const AppMenu = () => {
           <DropdownMenu.Item
             key={`server-${server.id}`}
             $isActive={server.id === currentServer?.id}
-            icon={isSessionExpired ? <RiLockLine color="var(--danger-color)" /> : <RiServerFill />}
+            icon={isSessionExpired ? <RiLockLine color="var(--danger-color)" /> : <RiServerLine />}
             onClick={() => {
               if (!isSessionExpired) return handleSetCurrentServer(server);
               return handleCredentialsModal(server);
@@ -82,18 +102,46 @@ export const AppMenu = () => {
       })}
       <DropdownMenu.Divider />
       <DropdownMenu.Item
-        icon={<RiEdit2Fill />}
+        icon={<RiEdit2Line />}
         onClick={handleManageServersModal}
       >
         Manage servers
       </DropdownMenu.Item>
       <DropdownMenu.Item
         component={Link}
-        icon={<RiSettings3Fill />}
+        icon={<RiSettings3Line />}
         to={AppRoute.SETTINGS}
       >
         Settings
       </DropdownMenu.Item>
+      <DropdownMenu.Divider />
+      <DropdownMenu.Item
+        icon={<RiArrowLeftSLine />}
+        onClick={() => navigate(-1)}
+      >
+        Go back
+      </DropdownMenu.Item>
+      <DropdownMenu.Item
+        icon={<RiArrowRightSLine />}
+        onClick={() => navigate(1)}
+      >
+        Go forward
+      </DropdownMenu.Item>
+      {collapsed ? (
+        <DropdownMenu.Item
+          icon={<RiLayoutRightLine />}
+          onClick={handleExpandSidebar}
+        >
+          Expand sidebar
+        </DropdownMenu.Item>
+      ) : (
+        <DropdownMenu.Item
+          icon={<RiLayoutLeftLine />}
+          onClick={handleCollapseSidebar}
+        >
+          Collapse sidebar
+        </DropdownMenu.Item>
+      )}
       {showBrowserDevToolsButton && (
         <>
           <DropdownMenu.Divider />