Adding ability to restrict tab visibility

responsively
MESH-Research · Nov 8, 2023 · 0a9bc96 · 0a9bc96
1 parent c1ebda5
commit 0a9bc96
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/invenio.cfg b/invenio.cfg
@@ -344,8 +344,7 @@ APP_RDM_DETAIL_SIDEBAR_SECTIONS_RIGHT = [
      },
     {"section": _("Download"),
      "component_name": "SidebarDownloadSection",
-     "props": ["activeTab",
-               "defaultPreviewFile",
+     "props": ["defaultPreviewFile",
                "files",
                "fileTabIndex",
                "hasFiles",
@@ -583,7 +582,8 @@ APP_RDM_DETAIL_MAIN_SECTIONS = [
          }
      ],
      "tab": True,
-     "props": []
+     "props": [],
+     "show": "tablet computer only"
     },
     {"section": "Files",
      "component_name": "DetailMainTab",
@@ -623,7 +623,8 @@ APP_RDM_DETAIL_MAIN_SECTIONS = [
         }
      ],
      "tab": True,
-     "props": []
+     "props": [],
+     "show": "tablet computer only"
     }
 ]
 

diff --git a/...sets/semantic-ui/js/knowledge_commons_repository/custom_detail/sections/DetailContent.jsx b/...sets/semantic-ui/js/knowledge_commons_repository/custom_detail/sections/DetailContent.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Tab } from "semantic-ui-react";
+import { Menu, Tab } from "semantic-ui-react";
 import { DetailMainTab } from "./DetailMainTab";
 import { DetailRightSidebar } from "./DetailRightSidebar";
 import { DetailLeftSidebar } from "./DetailLeftSidebar";
@@ -113,7 +113,7 @@ const DetailContent = (rawProps) => {
   const topLevelProps = { ...rawProps, ...extraProps };
 
   const panes = tabbedSections.map(
-    ({ section, component_name, subsections, props }) => {
+    ({ section, component_name, subsections, props, show }) => {
       // Because can't import DetailMainTab in componentsMap (circular)
       if (component_name === "DetailMainTab") {
         component_name = undefined;
@@ -135,9 +135,16 @@ const DetailContent = (rawProps) => {
         subsections: subsections,
       };
       return {
-        menuItem: section,
+        menuItem: (
+          <Menu.Item key={section} className={show}>
+            {section}
+          </Menu.Item>
+        ),
         render: () => (
-          <Tab.Pane key={section} className={`record-details-tab ${section}`}>
+          <Tab.Pane
+            key={section}
+            className={`record-details-tab ${section} ${show}`}
+          >
             <TabComponent {...passedProps} key={section} />
           </Tab.Pane>
         ),