finish

package.json

@@ -17,6 +17,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
+    "react-toastify": "^10.0.4",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0"
   },

src/components/Header/Header.jsx

@@ -13,7 +13,7 @@ const Header = () => {
                 <svg width="40" height="40">
                   <use href={"./icons.svg#icon-car"} />
                 </svg>
-                ExpressWheels
+                <span className={css.logoText}>ExpressWheels</span>
               </div>
             </Link>
           </li>

src/components/Header/Header.module.css

@@ -16,12 +16,21 @@
   gap: 16px;
 }
 
+.logoText {
+  @media only screen and (max-width: 475px) {
+    display: none;
+  }
+}
+
 .menu {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 50px;
   height: 100%;
+  @media only screen and (max-width: 475px) {
+    gap: 40px;
+  }
 }
 
 .menuItem:first-child {

src/components/SharedLayout/SharedLayout.jsx

@@ -3,13 +3,21 @@ import { Suspense } from "react";
 import Header from "../Header/Header";
 import Loader from "../Loader/Loader";
 
+import "react-toastify/dist/ReactToastify.css";
+import { ToastContainer } from "react-toastify";
+
 const SharedLayout = () => {
   return (
     <>
       <Header />
       <Suspense fallback={<Loader />}>
         <Outlet />
       </Suspense>
+      <ToastContainer
+        position="top-right"
+        autoClose={3000}
+        hideProgressBar={true}
+      />
     </>
   );
 };