refactor: move profile to the container layout

src/app/[locale]/(main)/(container)/(homepage)/components/MainSlider/MainSlider.tsx

@@ -28,9 +28,6 @@ const MainSlider: FC<MainSliderProps> = ({ items }) => {
       pagination={{
         clickable: true,
       }}
-      style={{
-        borderRadius: 16,
-      }}
     >
       {items?.map((item) => {
         return (

src/app/[locale]/(main)/(container)/profile/layout.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Box, Container, Stack } from '@mui/material';
+import React, { FC, ReactNode } from 'react';
+import Menu from './components/Menu';
+import { DesktopView, MobileView } from '@/components/ResponsiveDesign';
+import { useAppContext } from '@/hooks/useAppContext';
+import MobileHeader from '@/components/MobileHeader/MobileHeader';
+
+export interface LayoutProps {
+  children: ReactNode;
+}
+const Layout: FC<LayoutProps> = ({ children }) => {
+  const { isMobile } = useAppContext();
+  return (
+    <>
+      <DesktopView>
+        <Stack direction={isMobile ? 'column' : 'row'} spacing={2}>
+          <DesktopView>
+            <Box
+              sx={{
+                width: 260,
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 1,
+              }}
+            >
+              <Menu />
+            </Box>
+          </DesktopView>
+
+          {children}
+        </Stack>
+      </DesktopView>
+      <MobileView>
+        <Stack direction={'column'} spacing={2}>
+          {children}
+        </Stack>
+      </MobileView>
+    </>
+  );
+};
+
+export default Layout;

src/app/[locale]/(main)/layout.tsx

@@ -1,6 +1,10 @@
 import { ISliderItem } from '@/app/[locale]/(main)/(container)/(homepage)/components/MainSlider/types';
 import { Footer } from '@/components/Footer';
 import { Header } from '@/components/Header';
+import { DesktopHeader } from '@/components/Header/components';
+import TopBanner from '@/components/Header/components/TopBanner';
+import MobileHeader from '@/components/MobileHeader/MobileHeader';
+import { DesktopView, MobileView } from '@/components/ResponsiveDesign';
 import { getClient } from '@/graphql/clients/serverSideClient';
 import { GET_PUBLISHED_PAGES_LIST } from '@/graphql/queries/pages';
 import { GET_TOP_BANNER } from '@/graphql/queries/sliders';
@@ -9,6 +13,7 @@ import {
   GetPublishedPagesListQuery,
   GetTopBannerQuery,
 } from '@/graphql/types/graphql';
+import { Container } from '@mui/material';
 import { FC, ReactNode } from 'react';
 
 export interface LayoutProps {
@@ -48,7 +53,17 @@ const Layout: FC<LayoutProps> = async ({ children }) => {
 
   return (
     <>
-      <Header topBanner={topBanner} />
+      <Header>
+        {topBanner && <TopBanner data={topBanner} />}
+        <MobileView>
+          <MobileHeader />
+        </MobileView>
+        <Container maxWidth="xl">
+          <DesktopView>
+            <DesktopHeader />
+          </DesktopView>
+        </Container>
+      </Header>
       {children}
       <Footer pages={pagesList} />
     </>

src/components/Header/Header.tsx

@@ -1,18 +1,13 @@
 'use client';
 
-import TopBanner, {
-  TopBannerProps,
-} from '@/components/Header/components/TopBanner';
 import { Z_INDEX_VALUES } from '@/config/responsive';
-import { AppBar, Container } from '@mui/material';
-import { FC } from 'react';
-import DesktopView from '../ResponsiveDesign/components/DesktopView';
-import { DesktopHeader } from './components';
+import { AppBar } from '@mui/material';
+import { FC, ReactNode } from 'react';
 
 export interface HeaderProps {
-  topBanner?: TopBannerProps['data'];
+  children: ReactNode;
 }
-const Header: FC<HeaderProps> = ({ topBanner }) => {
+const Header: FC<HeaderProps> = ({ children }) => {
   return (
     <AppBar
       elevation={0}
@@ -26,12 +21,7 @@ const Header: FC<HeaderProps> = ({ topBanner }) => {
         zIndex: Z_INDEX_VALUES.siteHeader,
       }}
     >
-      {topBanner && <TopBanner data={topBanner} />}
-      <Container maxWidth="xl">
-        <DesktopView>
-          <DesktopHeader />
-        </DesktopView>
-      </Container>
+      {children}
     </AppBar>
   );
 };

src/components/Header/components/LoggedInButton.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import MenuItems from '@/app/[locale]/(main)/profile/components/MenuItems';
-import useMenuItems from '@/app/[locale]/(main)/profile/hooks/useMenuItems';
+import MenuItems from '@/app/[locale]/(main)/(container)/profile/components/MenuItems';
+import useMenuItems from '@/app/[locale]/(main)/(container)/profile/hooks/useMenuItems';
 import { Link } from '@/navigation';
 import { ChevronRight, PersonOutline } from '@mui/icons-material';
 import { Button, Menu, MenuItem, Typography } from '@mui/material';
@@ -82,7 +82,7 @@ const LoggedInButton: FC<LoggedInButton> = ({ session }) => {
         variant="outlined"
         color="inherit"
         sx={{
-          minWidth: 150,
+          minWidth: 180,
         }}
         startIcon={<PersonOutline />}
       >

src/components/Header/components/TopSection.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Logo from '@/components/common/Logo';
 import { SIGN_IN_PAGE_PATHNAME } from '@/config/routes';
 import useCustomSearchParams from '@/hooks/useCustomSearchParams';
@@ -88,7 +90,7 @@ const TopSection: FC = () => {
               variant="outlined"
               color="inherit"
               sx={{
-                minWidth: 150,
+                minWidth: 180,
               }}
             >
               <Stack direction="row" spacing={1}>

src/components/MobileHeader/MobileHeader.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRouter } from '@/navigation';
+import { usePathname, useRouter } from '@/navigation';
 import { ArrowBack, Search, Share } from '@mui/icons-material';
 import { Box, BoxProps, IconButton, Stack, Typography } from '@mui/material';
 import { FC } from 'react';
@@ -10,6 +10,10 @@ export interface MobileHeaderProps extends BoxProps {
 }
 const MobileHeader: FC<MobileHeaderProps> = ({ title, ...props }) => {
   const router = useRouter();
+  const pathname = usePathname();
+  if (pathname === '/') {
+    return null;
+  }
 
   const onClick = () => {
     if (window?.history?.length > 1) {