chore: bump version to 3.1.1 in package.json; refactor mobile navigation components and improve layout structure (#472)

- Updated version to 3.1.1 in package.json.
- Refactored mobile navigation components to enhance structure and usability.
- Adjusted layout components to improve responsiveness and visual consistency.
- Introduced shared mobile navigation components for better code reuse.

apps/web/app/[locale]/home/(user)/_components/home-account-selector.tsx

@@ -22,13 +22,15 @@ export function HomeAccountSelector(props: {
   }>;
 
   userId: string;
+  collapsed?: boolean;
 }) {
   const router = useRouter();
   const context = useContext(SidebarContext);
+  const collapsed = props.collapsed ?? !context?.open;
 
   return (
     <AccountSelector
-      collapsed={!context?.open}
+      collapsed={collapsed}
       accounts={props.accounts}
       features={features}
       userId={props.userId}

apps/web/app/[locale]/home/(user)/_components/home-menu-navigation.tsx

@@ -39,7 +39,9 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
   return (
     <div className={'flex w-full flex-1 justify-between'}>
       <div className={'flex items-center space-x-8'}>
-        <AppLogo />
+        <div>
+          <AppLogo />
+        </div>
 
         <BorderedNavigationMenu>
           {routes.map((route) => (
@@ -54,7 +56,9 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
         </If>
 
         <If condition={featuresFlagConfig.enableTeamAccounts}>
-          <HomeAccountSelector userId={user.id} accounts={accounts} />
+          <div>
+            <HomeAccountSelector userId={user.id} accounts={accounts} />
+          </div>
         </If>
 
         <div>

apps/web/app/[locale]/home/(user)/_components/home-mobile-navigation.tsx

@@ -1,15 +1,12 @@
 'use client';
 
-import Link from 'next/link';
-
-import { LogOut, Menu } from 'lucide-react';
+import { Menu } from 'lucide-react';
 
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
@@ -17,6 +14,10 @@ import {
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 
+import {
+  MobileNavRouteLinks,
+  MobileNavSignOutItem,
+} from '~/components/mobile-navigation-shared';
 import featuresFlagConfig from '~/config/feature-flags.config';
 import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
 
@@ -27,25 +28,6 @@ import type { UserWorkspace } from '../_lib/server/load-user-workspace';
 export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
   const signOut = useSignOut();
 
-  const Links = personalAccountNavigationConfig.routes.map((item, index) => {
-    if ('children' in item) {
-      return item.children.map((child) => {
-        return (
-          <DropdownLink
-            key={child.path}
-            Icon={child.Icon}
-            path={child.path}
-            label={child.label}
-          />
-        );
-      });
-    }
-
-    if ('divider' in item) {
-      return <DropdownMenuSeparator key={index} />;
-    }
-  });
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -60,6 +42,7 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
             </DropdownMenuLabel>
 
             <HomeAccountSelector
+              collapsed={false}
               userId={props.workspace.user.id}
               accounts={props.workspace.accounts}
             />
@@ -68,57 +51,16 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
           <DropdownMenuSeparator />
         </If>
 
-        <DropdownMenuGroup>{Links}</DropdownMenuGroup>
+        <DropdownMenuGroup>
+          <MobileNavRouteLinks
+            routes={personalAccountNavigationConfig.routes}
+          />
+        </DropdownMenuGroup>
 
         <DropdownMenuSeparator />
 
-        <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
+        <MobileNavSignOutItem onSignOut={() => signOut.mutateAsync()} />
       </DropdownMenuContent>
     </DropdownMenu>
   );
 }
-
-function DropdownLink(
-  props: React.PropsWithChildren<{
-    path: string;
-    label: string;
-    Icon: React.ReactNode;
-  }>,
-) {
-  return (
-    <DropdownMenuItem
-      render={
-        <Link
-          href={props.path}
-          className={'flex h-12 w-full items-center space-x-4'}
-        >
-          {props.Icon}
-
-          <span>
-            <Trans i18nKey={props.label} defaults={props.label} />
-          </span>
-        </Link>
-      }
-      key={props.path}
-    />
-  );
-}
-
-function SignOutDropdownItem(
-  props: React.PropsWithChildren<{
-    onSignOut: () => unknown;
-  }>,
-) {
-  return (
-    <DropdownMenuItem
-      className={'flex h-12 w-full items-center space-x-4'}
-      onClick={props.onSignOut}
-    >
-      <LogOut className={'h-6'} />
-
-      <span>
-        <Trans i18nKey={'common.signOut'} defaults={'Sign out'} />
-      </span>
-    </DropdownMenuItem>
-  );
-}

apps/web/app/[locale]/home/(user)/_components/home-page-header.tsx

@@ -1,12 +1,26 @@
+import { cookies } from 'next/headers';
+
 import { PageHeader } from '@kit/ui/page';
 
-export function HomeLayoutPageHeader(
+import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+
+export async function HomeLayoutPageHeader(
   props: React.PropsWithChildren<{
     title: string | React.ReactNode;
     description: string | React.ReactNode;
   }>,
 ) {
+  const cookieStore = await cookies();
+  const layoutStyleCookie = cookieStore.get('layout-style')?.value;
+  const displaySidebarTrigger =
+    (layoutStyleCookie ?? personalAccountNavigationConfig.style) === 'sidebar';
+
   return (
-    <PageHeader description={props.description}>{props.children}</PageHeader>
+    <PageHeader
+      description={props.description}
+      displaySidebarTrigger={displaySidebarTrigger}
+    >
+      {props.children}
+    </PageHeader>
   );
 }

apps/web/app/[locale]/home/(user)/billing/_lib/server/user-billing.service.ts

@@ -109,7 +109,7 @@ class UserBillingService {
           planId,
           customerId,
           accountId,
-          error: message
+          error: message,
         },
         `Checkout session not created due to an error`,
       );

apps/web/app/[locale]/home/(user)/layout.tsx

@@ -52,7 +52,7 @@ async function SidebarLayout({ children }: React.PropsWithChildren) {
             <HomeSidebar workspace={workspace} />
           </PageNavigation>
 
-          <PageMobileNavigation className={'flex items-center justify-between'}>
+          <PageMobileNavigation>
             <MobileNavigation workspace={workspace} />
           </PageMobileNavigation>
 
@@ -75,7 +75,7 @@ async function HeaderLayout({ children }: React.PropsWithChildren) {
           <HomeMenuNavigation workspace={workspace} />
         </PageNavigation>
 
-        <PageMobileNavigation className={'flex items-center justify-between'}>
+        <PageMobileNavigation>
           <MobileNavigation workspace={workspace} />
         </PageMobileNavigation>
 
@@ -92,7 +92,9 @@ function MobileNavigation({
 }) {
   return (
     <>
-      <AppLogo />
+      <div>
+        <AppLogo />
+      </div>
 
       <HomeMobileNavigation workspace={workspace} />
     </>