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/[account]/layout.tsx

@@ -67,10 +67,10 @@ async function SidebarLayout({
             />
           </PageNavigation>
 
-          <PageMobileNavigation className={'flex items-center justify-between'}>
+          <PageMobileNavigation>
             <AppLogo />
 
-            <div className={'flex space-x-4'}>
+            <div className={'flex'}>
               <TeamAccountLayoutMobileNavigation
                 userId={data.user.id}
                 accounts={accounts}
@@ -94,6 +94,12 @@ function HeaderLayout({
 }>) {
   const data = use(loadTeamWorkspace(account));
 
+  const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
+    label: name,
+    value: slug,
+    image: picture_url,
+  }));
+
   return (
     <TeamAccountWorkspaceContextProvider value={data}>
       <Page style={'header'}>
@@ -101,6 +107,20 @@ function HeaderLayout({
           <TeamAccountNavigationMenu workspace={data} />
         </PageNavigation>
 
+        <PageMobileNavigation className={'flex items-center justify-between'}>
+          <div>
+            <AppLogo />
+          </div>
+
+          <div>
+            <TeamAccountLayoutMobileNavigation
+              userId={data.user.id}
+              accounts={accounts}
+              account={account}
+            />
+          </div>
+        </PageMobileNavigation>
+
         {children}
       </Page>
     </TeamAccountWorkspaceContextProvider>