feat: Add sidebar toggle for small screens

DSD-DBS · Apr 11, 2024 · e110588 · e110588
1 parent 03c2ca0
commit e110588
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 24 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -39,6 +39,7 @@
     "postcss": "^8.4.35",
     "prop-types": "^15.8.1",
     "react-router-dom": "^6.22.2",
+    "react-responsive": "^10.0.0",
     "storybook": "^7.6.16",
     "tailwindcss": "^3.4.1",
     "vite": "^5.1.4",

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -44,9 +44,3 @@
 .read-the-docs {
   color: #888;
 }
-
-@media print {
-  .header {
-    display: none !important;
-  }
-}
diff --git a/frontend/src/components/Button.jsx b/frontend/src/components/Button.jsx
@@ -5,8 +5,8 @@ import React from 'react';
 
 export const Button = ({ theme, children, ...props }) => {
   return (
-    <a href="#" {...props} className="rounded-md mx-1 bg-blue-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ">
+    <a href="#" {...props} className="print:hidden rounded-md mx-1 bg-blue-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ">
         {children}
     </a>
   );
-};
+};
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
@@ -7,7 +7,7 @@ import {ThemeSwitcher} from "./ThemeSwitcher";
 
 export const Header = () => {
     return (
-      <header className="header text-gray-700 p-4 flex justify-between items-center">
+      <header className="print:hidden text-gray-700 p-4 flex justify-between items-center">
           <div><Breadcrumbs /></div>
           <div></div>
           <div><ThemeSwitcher /></div>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -82,6 +82,10 @@ button:focus-visible {
   }
 }
 
+.collapsed {
+  width: 50px; 
+}
+
 .html-content {
   text-align: left;
 }
@@ -112,5 +116,8 @@ ul {
   body, .html-wrapper, .flex-1, .html-content {
     overflow: visible !important;
   }
-  @page  { margin: 15mm; }
+  .print\\:hidden {
+    display: none !important;
+}
+  @page  { margin: 15mm; }   
 }
diff --git a/frontend/src/views/TemplateView.jsx b/frontend/src/views/TemplateView.jsx
@@ -9,41 +9,44 @@ In this component we show list of template instances, and when we click on a tem
 
 import React, { useEffect, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
+import { useMediaQuery } from 'react-responsive';
 import { Header } from "../components/Header";
 import { InstanceView } from "../components/InstanceView";
 import { TemplateDetails } from "../components/TemplateDetails";
+import { Button } from '../components/Button';
 
 export const TemplateView = ({ endpoint }) => {
     let { templateName, objectID } = useParams();
     const [singleObjectID, setObjectID] = useState(null);
     const location = useLocation();
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+    const isSmallScreen = useMediaQuery({ query: '(max-width: 1024px)' });
+
 
     useEffect(() => {}, [endpoint, templateName, objectID, location]);
 
     return (
         <div className="flex flex-col h-screen">
-            {" "}
-            {/* Use h-screen to ensure the container fits the viewport height */}
-            {/* Header */}
             <Header />
-            {/* Body: Sidebar + Main Content */}
+            {isSmallScreen && (
+                <div className="flex justify-center">
+                    <Button 
+                        className="px-4 py-2"
+                        onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
+                    >
+                        {isSidebarCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
+                    </Button>
+                </div>
+            )}
             <div className="flex flex-1 overflow-hidden">
-                {" "}
-                {/* This ensures the remaining height is distributed here */}
-                {/* Sidebar - Adjust visibility/responsiveness as needed */}
-                <aside className="hidden lg:block lg:w-80 p-4 overflow-y-auto">
-                    {" "}
-                    {/* Use overflow-y-auto to enable vertical scrolling */}
+                <aside className={`print:hidden lg:block lg:w-80 h-full p-4 overflow-y-auto ${isSidebarCollapsed ? 'hidden' : 'w-64 h-screen'}`}>
                     <TemplateDetails
                         endpoint={endpoint}
                         onSingleInstance={setObjectID}
                     />
-                </aside>
-                {/* Main Content */}
+                </aside>            
                 <main className="flex-1 overflow-hidden p-4">
                     <div className="html-wrapper w-full p-4 max-w-none lg:max-w-4xl min-w-0 lg:min-w-[850px] overflow-y-hidden h-full flex items-center justify-center">
-                        {" "}
-                        {/* Ensure main content is scrollable and fills the height */}
                         {!!!objectID && !!!singleObjectID && (
                             <p className="text-xl text-gray-700">
                                 Select an Instance