From 00736123468a2216111f276f7fc6577f4c5d129b Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Mon, 4 Dec 2023 13:26:51 +0100
Subject: [PATCH] feat: print spectra

---
 src/component/main/InnerNMRiumContents.tsx | 16 ++++++++++++++++
 src/demo/Sidebar.tsx                       |  1 +
 src/demo/index.css                         | 20 ++++++++++++++++++--
 src/demo/layouts/Admin.tsx                 |  1 +
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/component/main/InnerNMRiumContents.tsx b/src/component/main/InnerNMRiumContents.tsx
index 5f14e1219..e3ebd5b22 100644
--- a/src/component/main/InnerNMRiumContents.tsx
+++ b/src/component/main/InnerNMRiumContents.tsx
@@ -60,6 +60,22 @@ const containerStyles = css`
     -o-user-drag: none;
     user-select: none;
   }
+
+  @media print {
+    @page {
+      size: a4 landscape;
+      margin: 0%;
+    }
+
+    * {
+      visibility: hidden;
+    }
+
+    #nmrium-viewer,
+    #nmrium-viewer * {
+      visibility: visible;
+    }
+  }
 `;
 
 interface InnerNMRiumContentsProps {
diff --git a/src/demo/Sidebar.tsx b/src/demo/Sidebar.tsx
index 770523896..077b705ca 100644
--- a/src/demo/Sidebar.tsx
+++ b/src/demo/Sidebar.tsx
@@ -102,6 +102,7 @@ function Sidebar(props) {
 
   return (
     <div
+      className="demo-side-bar"
       css={css(
         sidebarCss,
         props.menuIsClosed ? sidebarClosedCss : sidebarOpenCss,
diff --git a/src/demo/index.css b/src/demo/index.css
index bb0e7c5e9..de6418e63 100644
--- a/src/demo/index.css
+++ b/src/demo/index.css
@@ -1,3 +1,19 @@
+@media print {
+  .demo-main-container,
+  .demo-main-container>div {
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .demo-side-bar,
+  .demo-main-container>div>div:first-child {
+    display: none !important;
+  }
+
+
+}
+
 .rc-menu {
   border: none !important;
   box-shadow: none !important;
@@ -27,8 +43,8 @@
   background-color: white;
 }
 
-.rc-menu-submenu > .rc-menu {
+.rc-menu-submenu>.rc-menu {
   background-color: #28a4fb;
   color: #000;
   font-size: 12px;
-}
+}
\ No newline at end of file
diff --git a/src/demo/layouts/Admin.tsx b/src/demo/layouts/Admin.tsx
index c9e09acf0..286f37bfb 100644
--- a/src/demo/layouts/Admin.tsx
+++ b/src/demo/layouts/Admin.tsx
@@ -71,6 +71,7 @@ export function Dashboard(props: DashboardProps) {
         onMenuToggle={toggleMenu}
       />
       <div
+        className="demo-main-container"
         css={css(
           mainPanelCss,
           menuIsClosed ? mainPanelClosedCss : mainPanelOpenCss,