feat(Orgs): Update sidebar

apps/web/src/components/common/PageLayout/SideDrawer.tsx

@@ -1,3 +1,5 @@
+import OrgsSidebar from '@/features/organizations/components/OrgsSidebar'
+import { useIsOrganizationRoute } from '@/hooks/useIsOrganizationRoute'
 import { useRouter } from 'next/router'
 import { useEffect, type ReactElement } from 'react'
 import { IconButton, Drawer, useMediaQuery } from '@mui/material'
@@ -20,6 +22,8 @@ const SideDrawer = ({ isOpen, onToggle }: SideDrawerProps): ReactElement => {
   const { breakpoints } = useTheme()
   const isSmallScreen = useMediaQuery(breakpoints.down('md'))
   const [, isSafeAppRoute] = useIsSidebarRoute()
+  const isOrganizationRoute = useIsOrganizationRoute()
+
   const showSidebarToggle = isSafeAppRoute && !isSmallScreen
   // Keep the sidebar hidden on small screens via CSS until we collapse it via JS.
   // With a small delay to avoid flickering.
@@ -41,6 +45,8 @@ const SideDrawer = ({ isOpen, onToggle }: SideDrawerProps): ReactElement => {
     }
   }, [onToggle, router, isSmallScreen])
 
+  const SidebarComponent = isOrganizationRoute ? OrgsSidebar : Sidebar
+
   return (
     <>
       <Drawer
@@ -56,7 +62,7 @@ const SideDrawer = ({ isOpen, onToggle }: SideDrawerProps): ReactElement => {
         className={smDrawerHidden ? css.smDrawerHidden : undefined}
       >
         <aside>
-          <Sidebar />
+          <SidebarComponent />
         </aside>
       </Drawer>
 

apps/web/src/components/common/PageLayout/index.tsx

@@ -9,12 +9,9 @@ import SideDrawer from './SideDrawer'
 import { useIsSidebarRoute } from '@/hooks/useIsSidebarRoute'
 import { TxModalContext } from '@/components/tx-flow'
 import BatchSidebar from '@/components/batch/BatchSidebar'
-import { useIsOrganizationRoute } from '@/hooks/useIsOrganizationRoute'
-import OrganizationSidebar from '@/features/organizations/components/OrgsSidebar'
 
 const PageLayout = ({ pathname, children }: { pathname: string; children: ReactElement }): ReactElement => {
   const [isSidebarRoute, isAnimated] = useIsSidebarRoute(pathname)
-  const isOrganizationRoute = useIsOrganizationRoute(pathname)
   const [isSidebarOpen, setSidebarOpen] = useState<boolean>(true)
   const [isBatchOpen, setBatchOpen] = useState<boolean>(false)
   const { setFullWidth } = useContext(TxModalContext)
@@ -29,15 +26,11 @@ const PageLayout = ({ pathname, children }: { pathname: string; children: ReactE
         <Header onMenuToggle={isSidebarRoute ? setSidebarOpen : undefined} onBatchToggle={setBatchOpen} />
       </header>
 
-      {isSidebarRoute ? (
-        <SideDrawer isOpen={isSidebarOpen} onToggle={setSidebarOpen} />
-      ) : isOrganizationRoute ? (
-        <OrganizationSidebar />
-      ) : null}
+      {isSidebarRoute ? <SideDrawer isOpen={isSidebarOpen} onToggle={setSidebarOpen} /> : null}
 
       <div
         className={classnames(css.main, {
-          [css.mainNoSidebar]: (!isSidebarOpen || !isSidebarRoute) && !isOrganizationRoute,
+          [css.mainNoSidebar]: !isSidebarOpen || !isSidebarRoute,
           [css.mainAnimated]: isSidebarRoute && isAnimated,
         })}
       >

apps/web/src/components/sidebar/Sidebar/styles.module.css

@@ -5,9 +5,6 @@
   overflow: hidden;
   flex-direction: column;
   background-color: var(--color-background-paper);
-}
-
-.container {
   width: 230px;
 }
 

apps/web/src/features/organizations/components/OrgsSidebar/index.tsx

@@ -1,18 +1,15 @@
 import { type ReactElement } from 'react'
 
 import css from './styles.module.css'
-import { Drawer } from '@mui/material'
 import OrgsSidebarNavigation from '@/features/organizations/components/OrgsSidebarNavigation'
 import OrgsSidebarSelector from '../OrgsSidebarSelector'
 
 const OrgsSidebar = (): ReactElement => {
   return (
-    <Drawer variant="permanent" anchor="left">
-      <div className={css.container}>
-        <OrgsSidebarSelector />
-        <OrgsSidebarNavigation />
-      </div>
-    </Drawer>
+    <div className={css.container}>
+      <OrgsSidebarSelector />
+      <OrgsSidebarNavigation />
+    </div>
   )
 }
 

apps/web/src/features/organizations/components/OrgsSidebarNavigation/config.tsx

@@ -1,6 +1,9 @@
 import React, { type ReactElement } from 'react'
 import { AppRoutes } from '@/config/routes'
 import HomeIcon from '@/public/images/sidebar/home.svg'
+import SettingsIcon from '@/public/images/sidebar/settings.svg'
+import MembersIcon from '@/public/images/sidebar/members.svg'
+import AccountsIcon from '@/public/images/sidebar/bank.svg'
 import { SvgIcon } from '@mui/material'
 
 export type DynamicNavItem = {
@@ -19,17 +22,17 @@ export const navItems: DynamicNavItem[] = [
   },
   {
     label: 'Safe Accounts',
-    icon: <SvgIcon component={HomeIcon} inheritViewBox />,
+    icon: <SvgIcon component={AccountsIcon} inheritViewBox sx={{ '& path': { fill: 'none !important' } }} />,
     href: AppRoutes.organizations.safeAccounts,
   },
   {
     label: 'Members',
-    icon: <SvgIcon component={HomeIcon} inheritViewBox />,
+    icon: <SvgIcon component={MembersIcon} inheritViewBox />,
     href: AppRoutes.organizations.members,
   },
   {
     label: 'Settings',
-    icon: <SvgIcon component={HomeIcon} inheritViewBox />,
+    icon: <SvgIcon component={SettingsIcon} inheritViewBox />,
     href: AppRoutes.organizations.settings,
   },
 ]

apps/web/src/features/organizations/components/OrgsSidebarNavigation/index.tsx

@@ -18,7 +18,7 @@ const Navigation = (): ReactElement => {
     <SidebarList>
       {navItems.map((item) => {
         const itemPath = item.href(orgId)
-        const isSelected = router.pathname === itemPath
+        const isSelected = router.asPath === itemPath
 
         return (
           <div key={itemPath}>

apps/web/src/hooks/useIsOrganizationRoute.ts

@@ -1,9 +1,9 @@
 import { AppRoutes } from '@/config/routes'
 import { usePathname } from 'next/navigation'
 
-export const useIsOrganizationRoute = (pathname: string): boolean => {
+export const useIsOrganizationRoute = (): boolean => {
   const clientPathname = usePathname()
-  const route = pathname || clientPathname || ''
+  const route = clientPathname || ''
 
   return route.startsWith(AppRoutes.organizations.index('')) // This will check against /organizations/
 }

apps/web/src/hooks/useIsSidebarRoute.ts

@@ -1,4 +1,5 @@
 import { AppRoutes } from '@/config/routes'
+import { useIsOrganizationRoute } from '@/hooks/useIsOrganizationRoute'
 import { usePathname } from 'next/navigation'
 import { useRouter } from 'next/router'
 
@@ -26,10 +27,14 @@ const TOGGLE_SIDEBAR_ROUTES = [AppRoutes.apps.open]
  */
 export function useIsSidebarRoute(pathname?: string): [boolean, boolean] {
   const clientPathname = usePathname()
+  const isOrganizationRoute = useIsOrganizationRoute()
   const route = pathname || clientPathname || ''
   const noSidebar = NO_SIDEBAR_ROUTES.includes(route)
   const toggledSidebar = TOGGLE_SIDEBAR_ROUTES.includes(route)
   const router = useRouter()
   const hasSafe = !router.isReady || !!router.query.safe
-  return [!noSidebar && hasSafe, toggledSidebar]
+
+  const displaySidebar = (!noSidebar && hasSafe) || isOrganizationRoute
+
+  return [displaySidebar, toggledSidebar]
 }