♻️ refactor: Move NavBar to @nav slot route

src/layout/DefaultLayout/Desktop/SideBar/index.tsx → src/app/(main)/@nav/_layout/Desktop/index.tsx

@@ -1,17 +1,16 @@
+'use client';
+
 import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { SidebarTabKey } from '@/store/global/initialState';
+import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 
 import Avatar from './Avatar';
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
-interface Props {
-  sidebarKey?: SidebarTabKey;
-}
-
-export default memo<Props>(({ sidebarKey }) => {
+const Nav = memo(() => {
+  const sidebarKey = useActiveTabKey();
   return (
     <SideNav
       avatar={<Avatar />}
@@ -21,3 +20,7 @@ export default memo<Props>(({ sidebarKey }) => {
     />
   );
 });
+
+Nav.displayName = 'DesktopNav';
+
+export default Nav;

src/app/(main)/@nav/_layout/Mobile.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Bot, MessageSquare, User } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { rgba } from 'polished';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useActiveTabKey } from '@/hooks/useActiveTabKey';
+import { SidebarTabKey } from '@/store/global/initialState';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    svg {
+      fill: ${rgba(token.colorPrimary, 0.33)};
+    }
+  `,
+  container: css`
+    position: fixed;
+    z-index: 100;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  `,
+}));
+
+const Nav = memo(() => {
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+  const activeKey = useActiveTabKey();
+  const router = useRouter();
+  const items: MobileTabBarProps['items'] = useMemo(
+    () => [
+      {
+        icon: (active) => (
+          <Icon className={active ? styles.active : undefined} icon={MessageSquare} />
+        ),
+        key: SidebarTabKey.Chat,
+        onClick: () => {
+          router.push('/chat');
+        },
+        title: t('tab.chat'),
+      },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
+        key: SidebarTabKey.Market,
+        onClick: () => {
+          router.push('/market');
+        },
+        title: t('tab.market'),
+      },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={User} />,
+        key: SidebarTabKey.Setting,
+        onClick: () => {
+          router.push('/settings');
+        },
+        title: t('tab.setting'),
+      },
+    ],
+    [t],
+  );
+
+  return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} safeArea />;
+});
+
+Nav.displayName = 'MobileNav';
+
+export default Nav;

src/app/(main)/@nav/default.tsx

@@ -0,0 +1,16 @@
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const Default = () => {
+  const mobile = isMobileDevice();
+
+  const Nav = mobile ? Mobile : Desktop;
+
+  return <Nav />;
+};
+
+Default.displayName = 'Nav';
+
+export default Default;

src/app/(main)/_layout/Desktop.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsPWA } from '@/hooks/useIsPWA';
+
+import { LayoutProps } from './type';
+
+const Layout = memo<LayoutProps>(({ children, nav }) => {
+  const isPWA = useIsPWA();
+  const theme = useTheme();
+
+  return (
+    <Flexbox
+      height={'100%'}
+      horizontal
+      style={{
+        borderTop: isPWA ? `1px solid ${theme.colorBorder}` : undefined,
+        position: 'relative',
+      }}
+      width={'100%'}
+    >
+      {nav}
+      {children}
+    </Flexbox>
+  );
+});
+
+Layout.displayName = 'DesktopMainLayout';
+
+export default Layout;

src/app/(main)/_layout/Mobile.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { LayoutProps } from './type';
+
+const MOBILE_IGNORE_NAV_ROUTES = ['/settings', '/me/', '/profile', '/chat/'];
+
+const Layout = memo(({ children, nav }: LayoutProps) => {
+  const pathname = usePathname();
+  const hideNav = MOBILE_IGNORE_NAV_ROUTES.some((path) => pathname.startsWith(path));
+
+  return (
+    <Flexbox
+      style={{
+        height: '100%',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        position: 'relative',
+        width: '100vw',
+      }}
+    >
+      {children}
+      {!hideNav && nav}
+    </Flexbox>
+  );
+});
+
+Layout.displayName = 'MobileMainLayout';
+
+export default Layout;

src/app/(main)/_layout/type.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  children: ReactNode;
+  nav: ReactNode;
+}

src/app/(main)/layout.tsx

@@ -0,0 +1,17 @@
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
+
+const MainLayout = ({ children, nav }: LayoutProps) => {
+  const mobile = isMobileDevice();
+
+  const Layout = mobile ? Mobile : Desktop;
+
+  return <Layout nav={nav}>{children}</Layout>;
+};
+
+MainLayout.displayName = 'MainLayout';
+
+export default MainLayout;

src/app/layout.tsx

@@ -8,7 +8,6 @@ import Analytics from '@/components/Analytics';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
-import LayoutRoutes from '@/layout/routes';
 import { isMobileDevice } from '@/utils/responsive';
 
 const RootLayout = async ({ children }: PropsWithChildren) => {
@@ -21,9 +20,7 @@ const RootLayout = async ({ children }: PropsWithChildren) => {
     <html dir={direction} lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
       <body>
         <GlobalProvider>
-          <AuthProvider>
-            <LayoutRoutes>{children}</LayoutRoutes>
-          </AuthProvider>
+          <AuthProvider>{children}</AuthProvider>
         </GlobalProvider>
         <Analytics />
         <SpeedInsights />

src/app/page.tsx

@@ -14,6 +14,8 @@ const Page = () => {
   );
 };
 
+Page.displayName = 'Loading';
+
 export default Page;
 
 export const metadata: Metadata = {