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/components/mobile-navigation-shared.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import Link from 'next/link';
+
+import { LogOut } from 'lucide-react';
+
+import { DropdownMenuItem, DropdownMenuSeparator } from '@kit/ui/dropdown-menu';
+import { Trans } from '@kit/ui/trans';
+
+export function MobileNavDropdownLink(
+  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>
+      }
+    />
+  );
+}
+
+export function MobileNavSignOutItem(props: { onSignOut: () => unknown }) {
+  return (
+    <DropdownMenuItem
+      className={'flex h-12 w-full items-center space-x-4'}
+      onClick={props.onSignOut}
+    >
+      <LogOut className={'h-5'} />
+
+      <span>
+        <Trans i18nKey={'auth.signOut'} defaults={'Sign out'} />
+      </span>
+    </DropdownMenuItem>
+  );
+}
+
+export function MobileNavRouteLinks(props: {
+  routes: Array<
+    | {
+        children: Array<{
+          path: string;
+          label: string;
+          Icon?: React.ReactNode;
+        }>;
+      }
+    | { divider: true }
+  >;
+}) {
+  return props.routes.map((item, index) => {
+    if ('children' in item) {
+      return item.children.map((child) => (
+        <MobileNavDropdownLink
+          key={child.path}
+          Icon={child.Icon}
+          path={child.path}
+          label={child.label}
+        />
+      ));
+    }
+
+    if ('divider' in item) {
+      return <DropdownMenuSeparator key={index} />;
+    }
+  });
+}