FullScreen mode added in Navbar 1 and 2

src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx

@@ -157,6 +157,7 @@ import { FaParking } from 'react-icons/fa';
 import { isMobile } from 'react-device-detect';
 import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
 import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss';
+import { RiFullscreenExitFill, RiFullscreenFill } from 'react-icons/ri';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
@@ -263,6 +264,30 @@ const BSNavbar1 = (props) => {
       setAccIsOpen(false);
     }
   };
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+
+  
+  const handleFullscreen = useCallback(async () => {
+    if (!isFullscreen) {
+      try {
+        await document.documentElement.requestFullscreen();
+        setIsFullscreen(true);
+      } catch (error) {
+        console.error('Fullscreen error:', error);
+      }
+    } else {
+      try {
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        }
+        setIsFullscreen(false);
+      } catch (error) {
+        console.error('Exit fullscreen error:', error);
+      }
+    }
+  }, [isFullscreen]);
+
   useEffect(() => {
     if (!FeatureAddonData?.FeatureDtls?.length) return;
 
@@ -967,6 +992,20 @@ const BSNavbar1 = (props) => {
                 {formattedDate}
               </div>
             </div>
+
+            <Tooltip title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}>
+              <div
+                className={
+                  isFullscreen
+                    ? 'BsNavbar1FullScreenExit'
+                    : 'BsNavbar1FullScreen'
+                }
+                onClick={handleFullscreen}
+              >
+                {isFullscreen ? <RiFullscreenExitFill /> : <RiFullscreenFill />}
+              </div>
+            </Tooltip>
+
             <TooltipWrapper title="User Profile" isMobile={isMobile}>
               <div className="UserProfile">
                 <PozoUserIcon onClick={UserAcc} />

src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx

@@ -128,8 +128,8 @@ const FeaturesFunctionalities = lazy(
 const BSCustomerSelect = lazy(
   () => import('../UtillComponents/BSSelectCustomer.jsx')
 );
-// Scss
  import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss';
+import { RiFullscreenExitFill, RiFullscreenFill } from 'react-icons/ri';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
@@ -239,6 +239,27 @@ const BSNavbar2 = () => {
       item.SettingIdName === 'VerifyProduct' && item?.SettingValue === 'Y'
   );
 
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const handleFullscreen = useCallback(async () => {
+    if (!isFullscreen) {
+      try {
+        await document.documentElement.requestFullscreen();
+        setIsFullscreen(true);
+      } catch (error) {
+        console.error('Fullscreen error:', error);
+      }
+    } else {
+      try {
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        }
+        setIsFullscreen(false);
+      } catch (error) {
+        console.error('Exit fullscreen error:', error);
+      }
+    }
+  }, [isFullscreen]);
+
   useEffect(() => {
     if (!FeatureAddonData?.FeatureDtls?.length) return;
 
@@ -871,8 +892,7 @@ const BSNavbar2 = () => {
               )}
           </>
         )}
-        <div className='Nav2BSNavBarWholeSale'>
+        <div className="Nav2BSNavBarWholeSale">
-
           {SalesMode?.SettingValue === 'Y' && !OtherServicesglobal && (
             <BSNavBarWholeSale />
           )}
@@ -1280,6 +1300,18 @@ const BSNavbar2 = () => {
             </div>
           </>
         )}
+
+        <Tooltip title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}>
+          <div
+            className={
+              isFullscreen ? 'BsNavbar1FullScreenExit' : 'BsNavbar1FullScreen'
+            }
+            onClick={handleFullscreen}
+          >
+            {isFullscreen ? <RiFullscreenExitFill /> : <RiFullscreenFill />}
+          </div>
+        </Tooltip>
+
         {isMobile && (
           <div
             style={{

src/Pages/Preference/PreferenceList.scss

@@ -166,7 +166,6 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
-  width: 100%;
   margin-top: 1rem;
   position: fixed;
   bottom: 1.3rem;

src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss

@@ -522,3 +522,28 @@
     top: 53%;
   }
 }
+.BsNavbar1FullScreen {
+  background-color: #1292ee;
+  height: 28px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 18px;
+  color: #fff;
+}
+
+.BsNavbar1FullScreenExit {
+  background-color: #ef4444;
+  height: 28px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+}

src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss

@@ -423,3 +423,29 @@
   left: 11px;
   top: 10px;
 }
+
+.BsNavbar1FullScreen {
+  background-color: #1292ee;
+  height: 28px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 18px;
+  color: #fff;
+}
+
+.BsNavbar1FullScreenExit {
+  background-color: #ef4444;
+  height: 28px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+}