Simplify team account layout sidebar

The team account layout sidebar has been simplified by removing collapsible functionality and unneeded dependencies. The changes aim to improve clarity and reduce complexity in the codebase. With a lesser number of dependencies, future updates or improvements should be easier.

apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -1,19 +1,5 @@
-'use client';
-
 import { User } from '@supabase/supabase-js';
-
-import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
-
-import { If } from '@kit/ui/if';
 import { Sidebar, SidebarContent } from '@kit/ui/sidebar';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@kit/ui/tooltip';
-import { Trans } from '@kit/ui/trans';
-import { cn } from '@kit/ui/utils';
 
 import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';
 import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';
@@ -35,17 +21,13 @@ export function TeamAccountLayoutSidebar(props: {
   user: User;
 }) {
   return (
-    <Sidebar collapsed={props.collapsed}>
-      {({ collapsed, setCollapsed }) => (
-        <SidebarContainer
-          collapsed={collapsed}
-          setCollapsed={setCollapsed}
-          account={props.account}
-          accountId={props.accountId}
-          accounts={props.accounts}
-          user={props.user}
-        />
-      )}
+    <Sidebar>
+      <SidebarContainer
+        account={props.account}
+        accountId={props.accountId}
+        accounts={props.accounts}
+        user={props.user}
+      />
     </Sidebar>
   );
 }
@@ -54,8 +36,6 @@ function SidebarContainer(props: {
   account: string;
   accountId: string;
   accounts: AccountModel[];
-  collapsed: boolean;
-  setCollapsed: (collapsed: boolean) => void;
   collapsible?: boolean;
   user: User;
 }) {
@@ -89,75 +69,10 @@ function SidebarContainer(props: {
         <SidebarContent>
           <ProfileAccountDropdownContainer
             user={props.user}
-            collapsed={props.collapsed}
+            collapsed={false}
           />
-
-          <If condition={props.collapsible}>
-            <AppSidebarFooterMenu
-              collapsed={props.collapsed}
-              setCollapsed={props.setCollapsed}
-            />
-          </If>
         </SidebarContent>
       </div>
     </>
   );
 }
-
-function AppSidebarFooterMenu(props: {
-  collapsed: boolean;
-  setCollapsed: (collapsed: boolean) => void;
-}) {
-  return (
-    <CollapsibleButton
-      collapsed={props.collapsed}
-      onClick={props.setCollapsed}
-    />
-  );
-}
-
-function CollapsibleButton({
-  collapsed,
-  onClick,
-}: React.PropsWithChildren<{
-  collapsed: boolean;
-  onClick: (collapsed: boolean) => void;
-}>) {
-  const className = cn(
-    `bg-background absolute -right-[10.5px] bottom-4 cursor-pointer block`,
-  );
-
-  const iconClassName = 'bg-background text-muted-foreground h-5 w-5';
-
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger
-          className={className}
-          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          onClick={() => onClick(!collapsed)}
-        >
-          <ArrowRightCircle
-            className={cn(iconClassName, {
-              hidden: !collapsed,
-            })}
-          />
-
-          <ArrowLeftCircle
-            className={cn(iconClassName, {
-              hidden: collapsed,
-            })}
-          />
-        </TooltipTrigger>
-
-        <TooltipContent sideOffset={20}>
-          <Trans
-            i18nKey={
-              collapsed ? 'common:expandSidebar' : 'common:collapseSidebar'
-            }
-          />
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}