menu: add open button with its bottom sheet

src/pages/menu/menu.module.css

@@ -14,6 +14,37 @@
   object-fit: cover;
 }
 
+.restaurantHeaderTitleContainer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+}
+
+.openCloseButton {
+  background: #9fffcc4d;
+  color: #278655;
+  width: 62px !important;
+  height: 20px !important;
+  border: none;
+  box-shadow: none;
+  overflow: hidden;
+  font-family: Outfit;
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 12px;
+  line-height: 140%;
+  letter-spacing: 0%;
+
+  opacity: 1;
+  border-radius: 2px;
+  padding-top: 4px;
+  padding-right: 9px;
+  padding-bottom: 4px;
+  padding-left: 9px;
+  gap: 5px;
+}
+
 /* .restaurantHeader {
   margin-bottom: 24px;
 } */
@@ -131,7 +162,6 @@
   margin-left: 200px;
 }
 
-
 /* Enhanced Dark theme styles */
 :global(.darkApp) .itemName {
   color: rgba(255, 255, 255, 0.95) !important;

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>
       )}
     </>