best idea ever ui drawer

src/App.tsx

@@ -27,16 +27,21 @@ import {
 } from "./components/styled/styled";
 /// use react dom router to navigate to cart
 import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import CheckoutPage from "./pages/CheckoutPage";
 
 function App() {
   const { network } = useTonConnect();
   const { cartItems } = useCart();
-  const navigate = useNavigate();
 
-  function navigateToCheckout() {
-    console.log("Navigating to cart");
-    /// navigate to cart with hash router #/checkout
-    navigate("/checkout");
+  const [openCheckout, setOpenCheckout] = useState(false);
+
+  function showCheckout() {
+    setOpenCheckout(true);
+  }
+
+  function closeCheckout() {
+    setOpenCheckout(false);
   }
 
   return (
@@ -60,7 +65,7 @@ function App() {
               }}
               size="large"
               onClick={() => {
-                navigateToCheckout();
+                showCheckout();
               }}
             >
               <FontAwesomeIcon icon={faShoppingCart} />{" "}
@@ -92,6 +97,7 @@ function App() {
           <br />
           <ProductsList products={products} />
         </FlexBoxCol>
+        <CheckoutPage open={openCheckout} onClose={closeCheckout} />
       </AppContainer>
     </StyledApp>
   );

src/components/WelcomeStore.tsx

@@ -29,7 +29,10 @@ const WelcomeStore: React.FC = () => {
       <WelcomeText>Vite Mon CBD</WelcomeText>
       <br />
       <PaymentOptions>
-        Vous pouvez commander votre CBD en utilisant The Open Network (TON)
+        Commandez dès maintenant votre CBD sur Montpellier
+        <br />
+        <br />
+        The Open Network (TON)
       </PaymentOptions>
     </Container>
   );

src/main.tsx

@@ -22,7 +22,6 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         <HashRouter>
           <Routes>
             <Route path="/" element={<App />} />
-            <Route path="checkout" element={<CheckoutPage />} />
           </Routes>{" "}
         </HashRouter>
       </CartProvider>

src/pages/CheckoutPage.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useNavigate } from "react-router-dom";
 import { useCart } from "../providers/CartProvider";
 import styled from "styled-components";
@@ -9,26 +8,29 @@ import {
 } from "../components/styled/styled";
 import { BuyWithTon } from "../components/BuyWithTon";
 import products from "../shop/Products";
+import { Drawer } from "@mui/material";
+import { MouseEventHandler } from "react";
 
 const GoHomeButton = styled(Button)``;
 
 const EmptyCart = () => <p>Your cart is empty</p>;
-function CheckoutPage() {
+
+function CheckoutPage({ open, onClose }: any) {
   const { cartItems, totalPrice } = useCart();
   const navigate = useNavigate();
 
-  const goHome = () => {
-    navigate("/ ");
+  const closeDrawer = () => {
+    onClose();
   };
 
   return (
-    <div>
+    <Drawer anchor="bottom" open={open} onClose={onClose}>
       <CheckoutContainer
         style={{
           minHeight: "100vh",
         }}
       >
-        <GoHomeButton onClick={goHome}>←</GoHomeButton>
+        <GoHomeButton onClick={closeDrawer}>←</GoHomeButton>
         <h1>Checkout Page</h1>
         <h2>Your Cart</h2>
         {cartItems.length > 0 ? (
@@ -79,7 +81,7 @@ function CheckoutPage() {
         <BuyWithTon amount={totalPrice} />
         <br />
       </CheckoutContainer>
-    </div>
+    </Drawer>
   );
 }