menu: add open button with its bottom sheet

src/pages/menu/page.tsx

@@ -1,5 +1,5 @@
 import { StarFilled } from "@ant-design/icons";
-import { Image, Select, Space } from "antd";
+import { Button, Image, Select, Space } from "antd";
 import { FloatingButton } from "components/FloatingButton/FloatingButton";
 import LogoContainerIcon from "components/Icons/LogoContainerIcon";
 import ImageWithFallback from "components/ImageWithFallback";
@@ -29,7 +29,9 @@ import MenuSkeleton from "./components/MenuSkeleton/MenuSkeleton";
 import ScrollEventHandler from "./components/ScrollEventHandler";
 import SearchButton from "./components/SearchButton";
 import styles from "./menu.module.css";
-import TimeIcon from "components/Icons/order/TimeIcon";
+import NextIcon from "components/Icons/NextIcon";
+import { OpeningTimesBottomSheet } from "components/CustomBottomSheet/OpeningTimesBottomSheet";
+import { useState } from "react";
 
 function MenuPage() {
   const { subdomain } = useParams();
@@ -51,7 +53,7 @@ function MenuPage() {
   const { categoryRefs } = useScrollHandler();
   const { isMobile, isTablet, isDesktop } = useBreakPoint();
   const isLoading = isLoadingRestaurant || isLoadingMenu;
-
+  const [isOpeningTimesOpen, setIsOpeningTimesOpen] = useState(false);
   const orderTypeOptions = enumToSelectOptions(OrderType, t, "orderTypes");
 
   // Automatically load restaurant taxes when restaurant data is available
@@ -113,9 +115,19 @@ function MenuPage() {
 
           <div className={`${styles.headerContainer}`}>
             <div className={styles.contentWrapper}>
-              <ProTitle className={styles.restaurantTitle}>
-                {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
-              </ProTitle>
+              <div className={styles.restaurantHeaderTitleContainer}>
+                <ProTitle className={styles.restaurantTitle}>
+                  {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
+                </ProTitle>
+                <Button
+                  className={styles.openCloseButton}
+                  icon={<NextIcon className={styles.openCloseIcon} iconColor="#278655" iconSize={9} />}
+                  iconPosition="end"
+                  onClick={() => setIsOpeningTimesOpen(true)}
+                >
+                  {restaurant?.isOpened ? t("menu.open") : t("menu.close")}
+                </Button>
+              </div>
 
               <div className={styles.ratingContainer}>
                 <StarFilled className={styles.ratingStar} />
@@ -128,10 +140,10 @@ function MenuPage() {
                 </ProText>
               </div>
 
-              <ProText className={styles.openingHours}>
+              {/* <ProText className={styles.openingHours}>
                 <TimeIcon className={styles.timeIcon} />
                 {restaurant?.openingTime} - {restaurant?.closingTime}
-              </ProText>
+              </ProText> */}
             </div>
           </div>
 
@@ -152,6 +164,10 @@ function MenuPage() {
           <ScrollEventHandler />
           <FloatingButton />
           {isDesktop && <CartButton />}
+          <OpeningTimesBottomSheet
+            isOpen={isOpeningTimesOpen}
+            onClose={() => setIsOpeningTimesOpen(false)}
+          />
         </div>
       )}
     </>