add mobile sidebar

package.json

@@ -25,6 +25,7 @@
     "react-input-slider": "^6.0.1",
     "react-number-format": "^5.3.1",
     "react-redux": "^8.1.2",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "^6.16.0",
     "react-select": "^5.7.4",
     "react-slick": "^0.29.0",

src/components/CarCard/CarCard.styled.jsx

@@ -42,7 +42,7 @@ export const ImgWrapper = styled.div`
     right: 14px;
     border: none;
     background: transparent;
-    z-index: 1000;
+    z-index: 2;
     padding: 0;
     margin: 0;
     transition: all 250ms linear;

src/components/PageFooter/PageFooter.styled.jsx

@@ -13,6 +13,7 @@ export const FooterTopWrapper = styled.div`
   padding: 34px 0;
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 1rem;
 
   @media (min-width: 768px) {

src/components/PageHeader/PageHeader.jsx

@@ -1,12 +1,20 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHeart, faCar, faHome } from '@fortawesome/free-solid-svg-icons';
+import {
+  faHeart,
+  faCar,
+  faHome,
+  faBookOpen,
+  faClose,
+} from '@fortawesome/free-solid-svg-icons';
 import { Logo } from '../Logo/Logo';
-import { Header, HeaderWraper, NavLinks } from './PageHeader.styled';
+import { Header, HeaderWraper, NavLinks, SideBtn } from './PageHeader.styled';
 import { useDispatch } from 'react-redux';
 import { setFilter } from '../../redux/filter/filterSlice';
+import { useMediaQuery } from 'react-responsive';
 
-export const PageHeader = () => {
+export const PageHeader = ({ currentState, handleToggleSideBar }) => {
   const dispatch = useDispatch();
+  const isMobile = useMediaQuery({ query: '(max-width: 1279px)' });
   return (
     <Header>
       <HeaderWraper>
@@ -43,6 +51,15 @@ export const PageHeader = () => {
               }}
             />
           </NavLinks>
+          {isMobile && (
+            <SideBtn onClick={handleToggleSideBar}>
+              {currentState ? (
+                <FontAwesomeIcon icon={faClose} />
+              ) : (
+                <FontAwesomeIcon icon={faBookOpen} />
+              )}
+            </SideBtn>
+          )}
         </nav>
       </HeaderWraper>
     </Header>

src/components/PageHeader/PageHeader.styled.jsx

@@ -45,7 +45,25 @@ export const NavLinks = styled(NavLink)`
     &:focus {
       background-color: #3470ff;
       color: white;
-      border-color: #3470ff;
     }
   }
 `;
+
+export const SideBtn = styled.button`
+  transition: all 250ms linear;
+  display: inline-flex;
+  width: 44px;
+  height: 44px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid rgba(195, 212, 233, 0.4);
+  color: rgba(18, 20, 23, 0.5);
+  fill: rgba(18, 20, 23, 0.5);
+  background-color: white;
+  &:hover,
+  &:focus {
+    background-color: #3470ff;
+    color: white;
+  }
+`;

src/components/SharedLayout/SharedLayout.jsx

@@ -2,11 +2,13 @@ import { Outlet, useLocation } from 'react-router-dom';
 import { Suspense, useEffect } from 'react';
 import { PageHeader } from '../PageHeader/PageHeader';
 import { PageFooter } from '../PageFooter/PageFooter';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { fetchCars } from '../../redux/cars/carsOperations';
 import { SideBar } from '../SideBar/SideBar';
 import { ScrollToTop } from '../ScrollToTop/ScrollToTop';
 import { Main } from './SharedLayout.styled';
+import { toggleSideBar } from '../../redux/sidebar/sidebarSlice';
+import { selectOpenSideBar } from '../../redux/sidebar/sidebarSelectors';
 
 export const SharedLayout = () => {
   const { pathname } = useLocation();
@@ -15,11 +17,21 @@ export const SharedLayout = () => {
   useEffect(() => {
     dispatch(fetchCars());
   }, [dispatch]);
+
+  const currentState = useSelector(selectOpenSideBar);
+
+  const handleToggleSideBar = () => {
+    dispatch(toggleSideBar());
+  };
+
   return (
     <>
-      <PageHeader />
+      <PageHeader
+        currentState={currentState}
+        handleToggleSideBar={handleToggleSideBar}
+      />
       <Main $isFavouritePage={isFavouritePage}>
-        {isFavouritePage && <SideBar />}
+        {isFavouritePage && <SideBar currentState={currentState} />}
         <Suspense fallback={<div>Loading...</div>}>
           <Outlet />
         </Suspense>

src/components/SideBar/SideBar.jsx

@@ -1,9 +1,20 @@
+import { useEffect } from 'react';
 import { SideBarWrapper } from './SideBar.styled';
 import { SideBarSlider } from './SideBarForm/SIdeBarSlider';
 import { SideBarForm } from './SideBarForm/SideBarForm';
-export const SideBar = () => {
+
+export const SideBar = ({ currentState }) => {
+  useEffect(() => {
+    // Applying on mount
+    if (currentState) document.body.style.overflow = 'hidden';
+    // Applying on unmount
+    return () => {
+      document.body.style.overflow = 'visible';
+    };
+  }, [currentState]);
+
   return (
-    <SideBarWrapper>
+    <SideBarWrapper $isOpen={currentState}>
       <SideBarForm />
       <SideBarSlider />
     </SideBarWrapper>

src/components/SideBar/SideBar.styled.jsx

@@ -5,6 +5,19 @@ export const SideBarWrapper = styled.div`
   background-color: white;
   min-height: 100%;
   padding: 32px;
+  @media screen and (max-width: 1280px) {
+    position: fixed;
+    z-index: 999;
+    height: 100%;
+    transform: ${props =>
+      props.$isOpen ? 'transform: translateX(0%)' : 'translateX(-100%)'};
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  body & {
+    overflow: ${props => (props.$isOpen ? 'hidden' : 'auto')};
+    overflow: hidden;
+  }
 `;
 
 export const CheckboxForm = styled.form`

src/pages/NotFound/NotFound.jsx

@@ -1,7 +1,10 @@
+import cars from '../../assets/pngegg.png';
+
 export default function NotFound() {
   return (
-    <>
-      <h1>NotFound</h1>
-    </>
+    <div>
+      <h1>404 Page not found</h1>
+      <img src={cars} alt="Page not found" />
+    </div>
   );
 }

src/redux/sidebar/sidebarSelectors.js

@@ -0,0 +1 @@
+export const selectOpenSideBar = state => state.sideBar.currentState;

src/redux/sidebar/sidebarSlice.js

@@ -0,0 +1,18 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  currentState: true,
+};
+
+const sideBarSlice = createSlice({
+  name: 'sideBar',
+  initialState,
+  reducers: {
+    toggleSideBar: state => {
+      state.currentState = !state.currentState;
+    },
+  },
+});
+
+export const { toggleSideBar } = sideBarSlice.actions;
+export const sideBarReducer = sideBarSlice.reducer;

src/redux/store.js

@@ -15,6 +15,7 @@ import storage from 'redux-persist/lib/storage';
 import { carsReducer } from './cars/carsSlice';
 import { filterReducer } from './filter/filterSlice';
 import { likesReducer } from './likes/likesSlice';
+import { sideBarReducer } from './sidebar/sidebarSlice';
 
 const middleware = [
   ...getDefaultMiddleware({
@@ -35,6 +36,7 @@ export const store = configureStore({
     cars: carsReducer,
     filter: filterReducer,
     likes: persistReducer(likesPersistConfig, likesReducer),
+    sideBar: sideBarReducer,
   },
   middleware,
 });

src/styles/globalStyles.jsx

@@ -6,6 +6,7 @@ import ManropeSemiBold from '../fonts/Manrope-SemiBold.ttf';
 
 const GlobalStyle = createGlobalStyle`
 
+
     @font-face {
         font-family: 'ManropeRegular';
         src: local('ManropeRegular'),