feat: добавление layout page (#23)

src/app/providers/router/config.tsx

@@ -4,12 +4,29 @@ import { BlankPage } from '~/pages/BlankPage';
 import { NotFound } from '~/pages/NotFound';
 import { ProfilePage } from '~/pages/ProfilePage';
 
-const appClosed = [{ path: '*', element: <BlankPage /> }];
+const appClosed = [
+  {
+    path: '*',
+    view: {
+      base: <BlankPage />,
+    },
+  },
+];
 
 const normalRoutes = [
-  { path: '404', element: <NotFound /> },
-  { path: '*', element: <Navigate to={'404'} replace /> },
-  { path: '/profile', element: <ProfilePage /> },
+  {
+    path: '404',
+    view: {
+      base: <NotFound />,
+    },
+  },
+  { path: '/profile', view: { base: <ProfilePage /> } },
+  {
+    path: '*',
+    view: {
+      base: <Navigate to={'404'} replace />,
+    },
+  },
 ];
 
 export const routes = import.meta.env.VITE_CLOSED ? appClosed : normalRoutes;

src/app/providers/router/router.tsx

@@ -1,6 +1,8 @@
 import { Suspense } from 'react';
 import { Route, Routes, BrowserRouter } from 'react-router-dom';
 
+import { Layout } from '~/pages/Layout';
+
 import { Loader } from '~/shared/ui/Loader';
 
 import { routes } from './config';
@@ -11,7 +13,11 @@ const Routing = () => {
       <Suspense fallback={<Loader />}>
         <Routes>
           {routes.map((props) => (
-            <Route {...props} key={props.path} />
+            <Route
+              key={props.path}
+              path={props.path}
+              element={<Layout {...props.view} />}
+            />
           ))}
         </Routes>
       </Suspense>

src/pages/Layout/Layout.tsx

@@ -0,0 +1,21 @@
+import { ChakraProvider, useBreakpointValue } from '@chakra-ui/react';
+
+import { desktopTheme, mobileTheme } from '~/shared/config/theme';
+
+interface LayoutProps {
+  base: JSX.Element;
+  desktop?: JSX.Element;
+}
+
+export const Layout = ({ base, desktop }: LayoutProps) => {
+  const breakpoint = useBreakpointValue({ base: 'base', md: 'desktop' }, { ssr: false });
+
+  const isBase = breakpoint === 'base' || !desktop;
+
+  return (
+    <ChakraProvider theme={isBase ? mobileTheme : desktopTheme}>
+      {isBase ? base : desktop}
+      {isBase ? <div>Mobile Menu</div> : <div>Desktop Menu</div>}
+    </ChakraProvider>
+  );
+};

src/pages/Layout/index.ts

@@ -0,0 +1 @@
+export * from './Layout';

src/shared/config/theme/desktopTheme.ts

@@ -0,0 +1,5 @@
+import { extendTheme } from '@chakra-ui/react';
+
+import { basicTheme } from './theme';
+
+export const desktopTheme = extendTheme(basicTheme);

src/shared/config/theme/index.ts

@@ -1 +1,3 @@
 export { basicTheme } from './theme';
+export { mobileTheme } from './mobileTheme';
+export { desktopTheme } from './desktopTheme';

src/shared/config/theme/mobileTheme.ts

@@ -0,0 +1,5 @@
+import { extendTheme } from '@chakra-ui/react';
+
+import { basicTheme } from './theme';
+
+export const mobileTheme = extendTheme(basicTheme);

src/shared/config/theme/theme.ts

@@ -111,4 +111,7 @@ export const basicTheme = extendTheme({
       900: '#111111',
     },
   },
+  breakpoints: {
+    md: '37.5rem',
+  },
 });