Compact LHN items for Reports page and Workspace Editor

src/components/Skeletons/SearchRowSkeleton.tsx

@@ -19,7 +19,7 @@ type SearchRowSkeletonProps = {
 
 const barHeight = 8;
 const longBarWidth = 120;
-const leftPaneWidth = variables.sideBarWithLHBWidth + variables.navigationTabBarSize;
+const leftPaneWidth = variables.searchSidebarWidth + variables.navigationTabBarSize;
 
 // 12 is the gap between the element and the right button
 const gapWidth = 12;

src/pages/Search/SearchTypeMenu.tsx

@@ -214,14 +214,14 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
         (menuItems: MenuItemWithLink[]) => (
             <MenuItemList
                 menuItems={menuItems}
-                wrapperStyle={styles.sectionMenuItem}
+                wrapperStyle={styles.sectionMenuItemCompact}
                 icon={expensifyIcons.Bookmark}
-                iconWidth={variables.iconSizeNormal}
-                iconHeight={variables.iconSizeNormal}
+                iconWidth={variables.iconSizeSmall}
+                iconHeight={variables.iconSizeSmall}
                 shouldUseSingleExecution
             />
         ),
-        [expensifyIcons.Bookmark, styles.sectionMenuItem],
+        [expensifyIcons.Bookmark, styles.sectionMenuItemCompact],
     );
 
     const activeItemIndex = useMemo(() => {
@@ -275,9 +275,9 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
                                                     title={translate(item.translationPath)}
                                                     badgeStyle={styles.todoBadge}
                                                     icon={icon}
-                                                    iconWidth={variables.iconSizeNormal}
-                                                    iconHeight={variables.iconSizeNormal}
-                                                    wrapperStyle={styles.sectionMenuItem}
+                                                    iconWidth={variables.iconSizeSmall}
+                                                    iconHeight={variables.iconSizeSmall}
+                                                    wrapperStyle={styles.sectionMenuItemCompact}
                                                     badgeText={item.badgeText}
                                                     focused={focused}
                                                     onPress={onPress}

src/pages/workspace/WorkspaceInitialPage.tsx

@@ -48,6 +48,7 @@ import {
 import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
 import type WORKSPACE_TO_RHP from '@navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP';
 import type {WorkspaceSplitNavigatorParamList} from '@navigation/types';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -567,9 +568,11 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                                     interactive={!hasPolicyCreationError}
                                     title={translate(item.translationKey)}
                                     icon={item.icon}
+                                    iconWidth={variables.iconSizeSmall}
+                                    iconHeight={variables.iconSizeSmall}
                                     onPress={item.action}
                                     brickRoadIndicator={item.brickRoadIndicator}
-                                    wrapperStyle={styles.sectionMenuItem}
+                                    wrapperStyle={styles.sectionMenuItemCompact}
                                     highlighted={!!item?.highlighted}
                                     focused={!!(item.screenName && activeRoute?.startsWith(item.screenName))}
                                     badgeText={item.badgeText}

src/styles/index.ts

@@ -1599,17 +1599,18 @@ const staticStyles = (theme: ThemeColors) =>
         searchSplitContainer: {
             flex: 1,
             flexDirection: 'row',
-            marginLeft: variables.navigationTabBarSize + variables.sideBarWithLHBWidth,
+            marginLeft: variables.navigationTabBarSize + variables.searchSidebarWidth,
         },
 
         searchSidebar: {
-            width: variables.sideBarWithLHBWidth,
+            width: variables.searchSidebarWidth,
             height: '100%',
+            position: 'fixed',
+            left: variables.navigationTabBarSize,
             backgroundColor: theme.sidebar,
             justifyContent: 'space-between',
             borderRightWidth: 1,
             borderColor: theme.border,
-            marginLeft: variables.navigationTabBarSize,
         },
 
         // Sidebar Styles
@@ -2817,6 +2818,13 @@ const staticStyles = (theme: ThemeColors) =>
             alignItems: 'center',
         },
 
+        sectionMenuItemCompact: {
+            borderRadius: 8,
+            paddingHorizontal: 12,
+            height: 40,
+            alignItems: 'center',
+        },
+
         sectionSelectCircle: {
             backgroundColor: theme.cardBG,
         },
@@ -5464,11 +5472,15 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         todoBadge: {
-            width: variables.w36,
+            width: 24,
+            minWidth: 24,
+            maxWidth: 24,
+            minHeight: 20,
+            height: 20,
             alignItems: 'center',
             justifyContent: 'center',
-            paddingLeft: 0,
-            paddingRight: 0,
+            padding: 0,
+            overflow: 'hidden',
         },
 
         stickToBottom: {

src/styles/variables.ts

@@ -111,6 +111,7 @@ export default {
     uploadViewMargin: 20,
     chooseFilesViewMargin: 8,
     sideBarWithLHBWidth: 320,
+    searchSidebarWidth: 260,
     navigationTabBarSize: 72,
     popoverMargin: 18,
     pdfPageMaxWidth: 992,