feat: make homepage search sticky

Author: pooriaset

src/app/[locale]/(main)/(homepage)/components/Header.tsx renamed to src/app/[locale]/(main)/(homepage)/components/MobileHeader.tsx

@@ -1,16 +1,16 @@
 'use client';
 
 import useSearchPageParams from '@/hooks/useSearchPageParams';
+import { SearchPageParamsKeys } from '@/utils/params';
 import { SearchOutlined } from '@mui/icons-material';
-import { Box, Stack, Typography } from '@mui/material';
+import { Box, Container, Stack, Typography } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import { useTranslations } from 'next-intl';
 import { useState, useTransition } from 'react';
 import SearchDialog from './SearchDialog';
 import SearchSection from './SearchSection';
-import { SearchPageParamsKeys } from '@/utils/params';
 
-const Header = () => {
+const MobileHeader = () => {
   const [isPending, startTransition] = useTransition();
 
   const { navigate, q } = useSearchPageParams();
@@ -31,7 +31,10 @@ const Header = () => {
   const t = useTranslations();
 
   return (
-    <>
+    <Container
+      maxWidth="xl"
+      sx={{ borderBottom: '2px solid', borderColor: 'divider' }}
+    >
       <SearchDialog open={open} onClose={handleToggleDialog}>
         <SearchSection
           onClickOnBack={handleToggleDialog}
@@ -71,8 +74,8 @@ const Header = () => {
           </Typography>
         </Box>
       </Stack>
-    </>
+    </Container>
   );
 };
 
-export default Header;
+export default MobileHeader;

src/app/[locale]/(main)/(homepage)/page.tsx

@@ -16,15 +16,16 @@ import {
   menuOrderSortOptions,
   newestSortOption,
 } from '@/static/sortOptions';
-import { Box, Container, Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import { getTranslations } from 'next-intl/server';
 import { Suspense } from 'react';
-import PostsSlider from './components/PostsSlider';
-import Header from './components/Header';
+import MobileHeader from './components/MobileHeader';
 import MainCategories from './components/MainCategories';
+import PostsSlider from './components/PostsSlider';
 import ProductsSlider from './components/ProductsSlider';
 import SlidersContainer from './components/SlidersContainer';
 import SlidersSkeleton from './components/SlidersSkeleton';
+import { Header } from '@/components/Header';
 
 const getCategories = async () => {
   const { data } = await getClient().query<GetMainCategoriesQuery>({
@@ -124,9 +125,9 @@ export default async function Home() {
   return (
     <>
       <MobileView>
-        <Container maxWidth="xl">
-          <Header />
-        </Container>
+        <Header>
+          <MobileHeader />
+        </Header>
       </MobileView>
 
       <Stack spacing={4} alignItems="center">