book viewer full screen

src/router/MainRouter.tsx

@@ -13,24 +13,38 @@ import DesignerRequest from '@/pages/designer/Request'
 const MainRouter = () => {
     const { hasSubMenu } = useSharedStore()
     const location = useLocation()
+    const viewerPathPrefix = `${Paths.viewer}/`
+    const isViewerRoute =
+        location.pathname.startsWith(viewerPathPrefix) &&
+        location.pathname.length > viewerPathPrefix.length
     const hiddenSideBarRoutes = [Paths.editor]
-    const shouldRenderSideBar = !hiddenSideBarRoutes.includes(location.pathname)
+    const shouldRenderSideBar =
+        !hiddenSideBarRoutes.includes(location.pathname) && !isViewerRoute
     const routeHasLocalSidebar = location.pathname.includes('editor')
     const hasSidebarSpace = shouldRenderSideBar || routeHasLocalSidebar
     const headerSidebarSize = routeHasLocalSidebar ? 'wide' : 'default'
 
     return (
-        <div className='flex min-h-full flex-col overflow-hidden p-4'>
-            {shouldRenderSideBar ? <SideBar /> : null}
-            <Header hasMainSidebar={hasSidebarSpace} sidebarSize={headerSidebarSize} />
+        <div className={clx(
+            'flex min-h-full flex-col overflow-hidden',
+            isViewerRoute ? 'fixed inset-0 z-50 bg-neutral-100' : 'p-4',
+        )}>
+            {!isViewerRoute && shouldRenderSideBar ? <SideBar /> : null}
+            {!isViewerRoute ? (
+                <Header hasMainSidebar={hasSidebarSpace} sidebarSize={headerSidebarSize} />
+            ) : null}
             <div className={clx(
-                'mt-[68px] flex flex-1 flex-col xl:mt-[81px]',
-                shouldRenderSideBar && 'xl:ms-[269px]',
-                shouldRenderSideBar && hasSubMenu && 'xl:ms-[305px]',
-                routeHasLocalSidebar && 'xl:mr-[374px]',
+                'flex flex-1 flex-col min-h-0',
+                !isViewerRoute && 'mt-[68px] xl:mt-[81px]',
+                !isViewerRoute && shouldRenderSideBar && 'xl:ms-[269px]',
+                !isViewerRoute && shouldRenderSideBar && hasSubMenu && 'xl:ms-[305px]',
+                !isViewerRoute && routeHasLocalSidebar && 'xl:mr-[374px]',
             )}>
-                <div className='flex-1 flex flex-col overflow-auto w-full max-h-[calc(100vh-113px)]'>
-                    <div className='flex-1 h-full flex'>
+                <div className={clx(
+                    'flex-1 flex flex-col w-full min-h-0',
+                    isViewerRoute ? 'h-full overflow-hidden' : 'overflow-auto max-h-[calc(100vh-113px)]',
+                )}>
+                    <div className='flex-1 h-full flex min-h-0'>
                         <Routes>
                             <Route path={Paths.home} element={<Home />} />
                             <Route path={Paths.editor + '/:id'} element={<Editor />} />