Web:Viewer Added sidebar icons

packages/common/components/MediaViewer/sub-components/PDFViewer/PDFViewer.props.ts

@@ -4,6 +4,7 @@ interface PDFViewerProps {
   src: string;
   title: string;
   toolbar: ReturnType<typeof getPDFToolbar>;
+  isPDFSidebarOpen: boolean;
 
   onMask: VoidFunction;
   generateContextMenu: (
@@ -12,6 +13,7 @@ interface PDFViewerProps {
     bottom?: string
   ) => JSX.Element;
   setIsOpenContextMenu: Dispatch<SetStateAction<boolean>>;
+  setIsPDFSidebarOpen: Dispatch<SetStateAction<boolean>>;
   handleChangeVersion: (arg: string) => void; // temp
 }
 

packages/common/components/MediaViewer/sub-components/PDFViewer/index.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useLayoutEffect, useState, useRef } from "react";
 
-import { isDesktop } from "react-device-detect";
-
 import { loadScript, combineUrl } from "@docspace/common/utils";
 
 import PDFViewerProps from "./PDFViewer.props";
 import ViewerLoader from "../ViewerLoader";
+import MainPanel from "./ui/MainPanel";
+import Sidebar from "./ui/Sidebar";
 
 import {
   ErrorMessage,
@@ -14,28 +14,26 @@ import {
   PDFToolbar,
 } from "./PDFViewer.styled";
 
-import SideBar from "./ui/SideBar";
+import { ToolbarActionType } from "../../helpers";
+import { ToolbarItemType } from "../ImageViewerToolbar/ImageViewerToolbar.props";
 
 import "./lib";
-import ImageViewerToolbar from "../ImageViewerToolbar";
-import { ToolbarItemType } from "../ImageViewerToolbar/ImageViewerToolbar.props";
-import { ToolbarActionType } from "../../helpers";
-import MainPanel from "./ui/MainPanel";
 
+// import { isDesktop } from "react-device-detect";?
 const pdfViewerId = "pdf-viewer";
 
 function PDFViewer({
   src,
   title,
   toolbar,
+  isPDFSidebarOpen,
   onMask,
   generateContextMenu,
   setIsOpenContextMenu,
+  setIsPDFSidebarOpen,
 }: PDFViewerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const [isPanelOpen, setisPanelOpen] = useState<boolean>(false);
-
   const [file, setFile] = useState<ArrayBuffer | string | null>();
 
   const [isError, setIsError] = useState<boolean>(false);
@@ -136,6 +134,7 @@ function PDFViewer({
         }
         //@ts-ignore
         window.Viewer.open(file);
+        resize();
       } catch (error) {
         setIsError(true);
         console.log(error);
@@ -145,12 +144,12 @@ function PDFViewer({
 
   useEffect(() => {
     if (isLoadedViewerScript && containerRef.current?.hasChildNodes()) resize();
-  }, [isPanelOpen, isLoadedViewerScript]);
+  }, [isPDFSidebarOpen, isLoadedViewerScript]);
 
   function toolbarEvent(item: ToolbarItemType) {
     switch (item.actionType) {
       case ToolbarActionType.Panel:
-        setisPanelOpen((prev) => !prev);
+        setIsPDFSidebarOpen((prev) => !prev);
         break;
 
       default:
@@ -171,12 +170,15 @@ function PDFViewer({
       <DesktopTopBar
         title={title}
         onMaskClick={onMask}
-        isPanelOpen={isPanelOpen}
+        isPanelOpen={isPDFSidebarOpen}
       />
 
       <PdfViewrWrapper>
         <ViewerLoader isLoading={isLoadingFile || isLoadingScript} />
-        <SideBar isPanelOpen={isPanelOpen} />
+        <Sidebar
+          isPanelOpen={isPDFSidebarOpen}
+          setIsPDFSidebarOpen={setIsPDFSidebarOpen}
+        />
         <MainPanel
           ref={containerRef}
           isLoading={isLoadingFile || isLoadingScript}
@@ -186,7 +188,7 @@ function PDFViewer({
       <PDFToolbar
         toolbar={toolbar}
         percentValue={1}
-        isPanelOpen={isPanelOpen}
+        isPanelOpen={isPDFSidebarOpen}
         toolbarEvent={toolbarEvent}
         generateContextMenu={generateContextMenu}
         setIsOpenContextMenu={setIsOpenContextMenu}

packages/common/components/MediaViewer/sub-components/PDFViewer/ui/SideBar/index.tsx

@@ -1,20 +1,73 @@
-import React, { useEffect } from "react";
+import React, { Dispatch, SetStateAction, useState } from "react";
 import styled from "styled-components";
 
+import ArticleShowMenuReactSvgUrl from "PUBLIC_DIR/images/article-show-menu.react.svg";
+import ViewTilesIcon from "PUBLIC_DIR/images/view-tiles.react.svg";
+import ViewRowsIcon from "PUBLIC_DIR/images/view-rows.react.svg";
+
 type PanelProps = {
   isPanelOpen: boolean;
+  setIsPDFSidebarOpen: Dispatch<SetStateAction<boolean>>;
 };
 
-const SideBarContainer = styled.aside<{ isPanelOpen: boolean }>`
+const SidebarContainer = styled.aside<{ isPanelOpen: boolean }>`
+  display: flex;
+  flex-direction: column;
+
   height: 100vh;
   width: 100%;
 
+  background: #333333;
+
   max-width: ${(props) => (props.isPanelOpen ? "306px" : "0px")};
   visibility: ${(props) => (props.isPanelOpen ? "visible" : "hidden")};
 `;
 
-function SideBar({ isPanelOpen }: PanelProps) {
-  return <SideBarContainer id="viewer-thumbnail" isPanelOpen={isPanelOpen} />;
+const SidebarHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30px;
+
+  svg {
+    cursor: pointer;
+    path {
+      fill: rgba(255, 255, 255, 0.6);
+    }
+  }
+`;
+
+const Thumbnails = styled.section`
+  height: 100%;
+  width: 100%;
+
+  position: relative;
+`;
+
+const HideSidebarIcon = styled(ArticleShowMenuReactSvgUrl)`
+  transform: rotate(180deg);
+`;
+
+// import ArticleShowMenuReactSvgUrl from "PUBLIC_DIR/images/article-show-menu.react.svg?url";
+
+function Sidebar({ isPanelOpen, setIsPDFSidebarOpen }: PanelProps) {
+  const [toggle, setToggle] = useState<boolean>(false);
+
+  const handleToggle = () => setToggle((prev) => !prev);
+
+  const closeSidebar = () => setIsPDFSidebarOpen(false);
+
+  return (
+    <SidebarContainer isPanelOpen={isPanelOpen}>
+      <SidebarHeader>
+        {React.createElement(toggle ? ViewTilesIcon : ViewRowsIcon, {
+          onClick: handleToggle,
+        })}
+        <HideSidebarIcon onClick={closeSidebar} />
+      </SidebarHeader>
+      <Thumbnails id="viewer-thumbnail" />
+    </SidebarContainer>
+  );
 }
 
-export default SideBar;
+export default Sidebar;

packages/common/components/MediaViewer/sub-components/Viewer/index.tsx

@@ -34,7 +34,7 @@ function Viewer(props: ViewerProps) {
   };
 
   //#endregion
-
+  const [isPDFSidebarOpen, setIsPDFSidebarOpen] = useState<boolean>(false);
   const [panelVisible, setPanelVisible] = useState<boolean>(true);
   const [isOpenContextMenu, setIsOpenContextMenu] = useState<boolean>(false);
 
@@ -185,7 +185,9 @@ function Viewer(props: ViewerProps) {
 
       {props.playlist.length > 1 && !isFullscreen && !isMobile && (
         <>
-          {isNotFirstElement && <PrevButton prevClick={prevClick} />}
+          {isNotFirstElement && !isPDFSidebarOpen && (
+            <PrevButton prevClick={prevClick} />
+          )}
           {isNotLastElement && (
             <NextButton isPdfFIle={props.isPdf} nextClick={nextClick} />
           )}
@@ -257,6 +259,8 @@ function Viewer(props: ViewerProps) {
                 handleChangeVersion={handleChangeVersion}
                 generateContextMenu={props.generateContextMenu}
                 setIsOpenContextMenu={setIsOpenContextMenu}
+                isPDFSidebarOpen={isPDFSidebarOpen}
+                setIsPDFSidebarOpen={setIsPDFSidebarOpen}
               />
             ) : (
               <PDFViewerV2