Header tweaks, move explorer out of header

ShukantPal · ShukantPal · commit 4d4eefe4b8c0 · 2021-04-24T15:58:14.000-04:00
diff --git a/packages/webdoc-default-template/src/app/components/Explorer/ExplorerHeader.js b/packages/webdoc-default-template/src/app/components/Explorer/ExplorerHeader.js
@@ -5,6 +5,7 @@ import {makeStyles} from "@material-ui/core/styles";
 
 const useToggleButtonStyles = makeStyles({
   root: {
+    color: "var(--color-primary-text)",
     margin: "0 0 0 12px",
   },
 });
diff --git a/packages/webdoc-default-template/src/app/components/Explorer/ExplorerItem.js b/packages/webdoc-default-template/src/app/components/Explorer/ExplorerItem.js
@@ -44,7 +44,11 @@ export default function ExplorerItem(props) {
   return (
     <TreeItem
       id={props.data.$nodeId}
-      className="explorer-tree__target"
+      className={`explorer-tree__target${
+        targetChildren.length > 0 ? " explorer-tree__parent" : ""
+      }${
+        primary ? " explorer-tree__selected" : ""
+      }`}
       classes={{
         label: classes.label,
         iconContainer: classes.iconContainer,
diff --git a/packages/webdoc-default-template/src/app/components/Explorer/index.js b/packages/webdoc-default-template/src/app/components/Explorer/index.js
@@ -153,7 +153,6 @@ export default connect(({
         overflowX: "hidden",
       }),
     }}>
-      <ExplorerHeader isOpen={isOpen} toggleOpen={toggleOpen} />
       {data && <ExplorerFilter data={data} />}
       <TreeView
         expanded={expandedItems}
diff --git a/packages/webdoc-default-template/src/app/components/Header/Header.js b/packages/webdoc-default-template/src/app/components/Header/Header.js
@@ -16,8 +16,7 @@ export default connect(({explorerOpen}) => ({
 
   return (
     <div className="header__container">
-      {explorerOpen ? null :
-        <ExplorerHeader
+      {<ExplorerHeader
           isOpen={false}
           toggleOpen={() => setExplorerOpen(!explorerOpen)}
         />}
diff --git a/packages/webdoc-default-template/static/scripts/default-template.js b/packages/webdoc-default-template/static/scripts/default-template.js
@@ -7074,6 +7074,7 @@ function makeStyles_makeStyles(stylesOrCreator) {
 
 var useToggleButtonStyles = styles_makeStyles({
   root: {
+    color: "var(--color-primary-text)",
     margin: "0 0 0 12px"
   }
 });
@@ -8693,7 +8694,7 @@ function ExplorerItem(props) {
 
   return external_React_default.a.createElement(esm_TreeItem_TreeItem, {
     id: props.data.$nodeId,
-    className: "explorer-tree__target",
+    className: "explorer-tree__target".concat(targetChildren.length > 0 ? " explorer-tree__parent" : "").concat(primary ? " explorer-tree__selected" : ""),
     classes: {
       label: classes.label,
       iconContainer: classes.iconContainer,
@@ -9565,10 +9566,7 @@ function makeIds(data, collector) {
       width: 291,
       overflowX: "hidden"
     })
-  }, external_React_default.a.createElement(ExplorerHeader, {
-    isOpen: isOpen,
-    toggleOpen: toggleOpen
-  }), data && external_React_default.a.createElement(Explorer_ExplorerFilter, {
+  }, data && external_React_default.a.createElement(Explorer_ExplorerFilter, {
     data: data
   }), external_React_default.a.createElement(esm_TreeView_TreeView, {
     expanded: expandedItems,
@@ -9692,7 +9690,7 @@ function Header_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
   var currentItemId = appData.appBar.current;
   return React.createElement("div", {
     className: "header__container"
-  }, explorerOpen ? null : React.createElement(ExplorerHeader, {
+  }, React.createElement(ExplorerHeader, {
     isOpen: false,
     toggleOpen: function toggleOpen() {
       return setExplorerOpen(!explorerOpen);
diff --git a/packages/webdoc-default-template/tmpl/layout.tmpl b/packages/webdoc-default-template/tmpl/layout.tmpl
@@ -50,10 +50,10 @@ const integrations = JSON.stringify(config.integrations);
   <body class="root">
     <div class="docs <?js= document && document.type === "TutorialDoc" ? "tutorials" : "api-docs" ?>">
       <article class="page">
-        <div class="page-explorer" id="explorer-mount-point"></div>
         <div class="header-content-container">
           <section class="header" id="header-mount-point"></section>
           <div class="header-content-container__content">
+            <div class="page-explorer" id="explorer-mount-point"></div>
             <?js /* Includes content and member-explorer. */ ?>
             <?js= content ?>
             <!-- footer in content -->
