Update Sidebar - Expanding Button Section

packages/desktop-client/e2e/page-models/navigation.js

@@ -43,11 +43,11 @@ export class Navigation {
   }
 
   async goToSettingsPage() {
-    const settingsLink = this.page.getByRole('link', { name: 'Settings' });
+    const settingsLink = this.page.getByRole('button', { name: 'Settings' });
 
-    // Expand the "more" menu only if it is not already expanded
+    // Expand the menu only if it is not already expanded
     if (!(await settingsLink.isVisible())) {
-      await this.page.getByRole('button', { name: 'More' }).click();
+      await this.page.getByRole('button', { name: 'Test Budget' }).click();
     }
 
     await settingsLink.click();

packages/desktop-client/src/components/sidebar/PrimaryButtons.tsx

@@ -1,72 +1,94 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  type ComponentType,
+  type SVGProps,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
-import {
-  SvgCheveronDown,
-  SvgCheveronRight,
-  SvgCog,
-  SvgReports,
-  SvgStoreFront,
-  SvgTuning,
-  SvgWallet,
-} from '../../icons/v1';
-import { SvgCalendar } from '../../icons/v2';
+import { useLocalPref } from '../../hooks/useLocalPref';
+import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
+import { styles } from '../../style';
 import { View } from '../common/View';
 
 import { Item } from './Item';
 import { SecondaryItem } from './SecondaryItem';
 
-export function PrimaryButtons() {
+type PrimaryButtonItems = {
+  title: string;
+  Icon: ComponentType<SVGProps<SVGSVGElement>>;
+  to: string;
+  hidable?: boolean;
+};
+
+type PrimaryButtonsProps = {
+  collapseSpeed?: number;
+  buttons: Array<PrimaryButtonItems>;
+};
+
+export function PrimaryButtons({
+  collapseSpeed = 0.15,
+  buttons,
+}: PrimaryButtonsProps) {
   const { t } = useTranslation();
-  const [isOpen, setOpen] = useState(false);
-  const onToggle = useCallback(() => setOpen(open => !open), []);
+  const divRef = useRef<HTMLDivElement>(null);
+  const itemsRef = useRef<HTMLDivElement>(null);
   const location = useLocation();
-
-  const isActive = ['/payees', '/rules', '/settings', '/tools'].some(route =>
-    location.pathname.startsWith(route),
+  const [expanded, setExpandedActionButtonsPref] = useLocalPref(
+    'ui.expandPrimaryButtons',
   );
 
+  const onToggle = () => {
+    setExpandedActionButtonsPref(!expanded);
+  };
+
   useEffect(() => {
-    if (isActive) {
-      setOpen(true);
+    if (divRef?.current && itemsRef?.current) {
+      divRef.current.style.height = itemsRef.current.scrollHeight + 'px';
     }
-  }, [isActive, location.pathname]);
+  }, [expanded, location.pathname]);
 
   return (
-    <View style={{ flexShrink: 0 }}>
-      <Item title={t('Budget')} Icon={SvgWallet} to="/budget" />
-      <Item title={t('Reports')} Icon={SvgReports} to="/reports" />
-      <Item title={t('Schedules')} Icon={SvgCalendar} to="/schedules" />
-      <Item
-        title="More"
-        Icon={isOpen ? SvgCheveronDown : SvgCheveronRight}
+    <View style={{ padding: '5px 0', flexShrink: 0 }}>
+      <View
+        ref={divRef}
+        style={{
+          overflow: 'hidden',
+          transition: 'height ' + collapseSpeed + 's ease-in-out',
+        }}
+        aria-expanded={expanded}
+      >
+        <View
+          ref={itemsRef}
+          style={{
+            flexShrink: 0,
+            height: 'auto',
+          }}
+        >
+          {buttons.map(item => {
+            const isActive = location.pathname.startsWith(item.to);
+            const shouldHide = item.hidable && !expanded && !isActive;
+            return (
+              <Item
+                key={item.title}
+                title={item.title}
+                Icon={item.Icon}
+                to={item.to}
+                style={{
+                  ...(shouldHide && { display: 'none' }),
+                }}
+              />
+            );
+          })}
+        </View>
+      </View>
+      <SecondaryItem
+        title={expanded ? t('Less') : t('More')}
+        Icon={expanded ? SvgCheveronUp : SvgCheveronDown}
         onClick={onToggle}
-        style={{ marginBottom: isOpen ? 8 : 0 }}
-        forceActive={!isOpen && isActive}
+        style={{ marginLeft: 6, ...styles.verySmallText }}
       />
-      {isOpen && (
-        <>
-          <SecondaryItem
-            title={t('Payees')}
-            Icon={SvgStoreFront}
-            to="/payees"
-            indent={15}
-          />
-          <SecondaryItem
-            title={t('Rules')}
-            Icon={SvgTuning}
-            to="/rules"
-            indent={15}
-          />
-          <SecondaryItem
-            title={t('Settings')}
-            Icon={SvgCog}
-            to="/settings"
-            indent={15}
-          />
-        </>
-      )}
     </View>
   );
 }

packages/desktop-client/src/components/sidebar/Sidebar.tsx

@@ -11,7 +11,14 @@ import * as Platform from 'loot-core/src/client/platform';
 import { useGlobalPref } from '../../hooks/useGlobalPref';
 import { useLocalPref } from '../../hooks/useLocalPref';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
-import { SvgAdd } from '../../icons/v1';
+import {
+  SvgAdd,
+  SvgReports,
+  SvgStoreFront,
+  SvgTuning,
+  SvgWallet,
+} from '../../icons/v1';
+import { SvgCalendar } from '../../icons/v2';
 import { styles, theme } from '../../style';
 import { View } from '../common/View';
 import { useResponsive } from '../responsive/ResponsiveProvider';
@@ -65,6 +72,14 @@ export function Sidebar() {
     setSidebarWidth(rect.width);
   });
 
+  const primaryButtonConfigs = [
+    { title: t('Budget'), Icon: SvgWallet, to: '/budget' },
+    { title: t('Reports'), Icon: SvgReports, to: '/reports' },
+    { title: t('Schedules'), Icon: SvgCalendar, to: '/schedules' },
+    { title: t('Payees'), Icon: SvgStoreFront, to: '/payees', hidable: true },
+    { title: t('Rules'), Icon: SvgTuning, to: '/rules', hidable: true },
+  ];
+
   return (
     <Resizable
       defaultSize={{
@@ -118,7 +133,7 @@ export function Sidebar() {
             },
           }}
         >
-          <PrimaryButtons />
+          <PrimaryButtons buttons={primaryButtonConfigs} />
 
           <Accounts />
 

packages/loot-core/src/types/prefs.d.ts

@@ -59,6 +59,7 @@ export type MetadataPrefs = Partial<{
  */
 export type LocalPrefs = Partial<{
   'ui.showClosedAccounts': boolean;
+  'ui.expandPrimaryButtons': boolean;
   'expand-splits': boolean;
   'budget.collapsed': string[];
   'budget.summaryCollapsed': boolean;

upcoming-release-notes/3621.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [tlesicka]
+---
+
+Update Sidebar Primary Buttons group.  All buttons in the same flow and are not broken with "More" in the middle.