App bar + explorer design

Author: ShukantPal

common/config/rush/pnpm-lock.yaml

@@ -41,8 +41,6 @@
   "dependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-react": "^7.10.1",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
     "@webdoc/model": "^1.1.4",
     "@webdoc/template-library": "^1.1.4",
     "code-prettify": "^0.1.0",
@@ -60,6 +58,8 @@
     "@babel/preset-react": "^7.10.1",
     "@babel/register": "^7.9.0",
     "@material-ui/core": "^4.10.2",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@webdoc/babel-preset": "^1.0.0",
     "@webdoc/eslint-config": "^1.0.0",
     "babel-loader": "^8.1.0",
@@ -80,6 +80,8 @@
     "sass": "^1.26.10",
     "sass-loader": "^9.0.3",
     "webpack": "^4.43.0",
-    "webpack-stream": "^5.2.1"
+    "webpack-stream": "^5.2.1",
+    "redux": "~4.0.5",
+    "react-redux": "~7.2.2"
   }
 }

packages/webdoc-default-template/package.json

@@ -210,8 +210,6 @@ function outReference(
 
     page = linker.processInternalURI(page, {outputRelative: true});
 
-    console.log(page);
-
     let doc;
 
     try {

packages/webdoc-default-template/publish.js

@@ -1,11 +1,10 @@
 import ExplorerItem from "./ExplorerItem";
 import TreeItem from "@material-ui/lab/TreeItem";
 import cuid from "cuid";
-import {useExplorerStyles} from "./useExplorerStyles";
-
+import {useExplorerCategoryStyles} from "./useExplorerStyles";
 
 export default function ExplorerCategoryItem(props) {
-  const classes = useExplorerStyles();
+  const classes = useExplorerCategoryStyles();
 
   if (!props.data.nodeId) {
     props.data.nodeId = cuid();
@@ -16,6 +15,7 @@ export default function ExplorerCategoryItem(props) {
       className="explorer-tree__group"
       classes={{
         label: classes.label,
+        labelContainer: classes.labelContainer,
         iconContainer: classes.iconContainer,
         selected: classes.selected,
       }}

packages/webdoc-default-template/src/app/components/Explorer/ExplorerCategoryItem.js

@@ -0,0 +1,33 @@
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import {makeStyles} from "@material-ui/core/styles";
+
+const useToggleButtonStyles = makeStyles({
+  root: {
+    margin: "0 0 0 12px",
+  },
+});
+
+export default function ExplorerHeader({
+  isOpen,
+  toggleOpen,
+}) {
+  const {root} = useToggleButtonStyles();
+
+  return (
+    <section className={"explorer__header" + (
+      isOpen ? " explorer__header-opened" : " explorer__header-closed"
+    )}>
+      <IconButton
+        aria-label="Toggle Explorer"
+        classes={{
+          root,
+        }}
+        onClick={toggleOpen}
+      >
+        <MenuIcon />
+      </IconButton>
+      <span className="explorer__header__title">{"{ "}<i>webdoc</i>{" }"}</span>
+    </section>
+  );
+}

packages/webdoc-default-template/src/app/components/Explorer/ExplorerHeader.js

@@ -3,15 +3,16 @@ import Link from "@material-ui/core/Link";
 //import React from "react";
 import TreeItem from "@material-ui/lab/TreeItem";
 import cuid from "cuid";
-import {useExplorerStyles} from "./useExplorerStyles";
+import {useExplorerCategoryStyles, useExplorerStyles} from "./useExplorerStyles";
 
 
 export default function ExplorerItem(props) {
   if (!props.data.nodeId) {
     props.data.nodeId = cuid();
   }
 
-  const classes = useExplorerStyles();
+  const classesItem = useExplorerStyles();
+  const classesCategory = useExplorerCategoryStyles();
   const targetChildren = [];
 
   let i = 0;
@@ -23,6 +24,8 @@ export default function ExplorerItem(props) {
     i++;
   }
 
+  const classes = i > 0 ? classesCategory : classesItem;
+
   return (
     <TreeItem
       className="explorer-tree__target"

packages/webdoc-default-template/src/app/components/Explorer/ExplorerItem.js

@@ -1,14 +1,26 @@
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import ArrowRightIcon from "@material-ui/icons/ArrowRight";
+import ExplorerHeader from "./ExplorerHeader";
 import ExplorerTarget from "./ExplorerItem";
 import ExplorerTargetGroup from "./ExplorerCategoryItem";
 import React from "react";
 import TreeView from "@material-ui/lab/TreeView";
+import {connect} from "react-redux";
+import store from "../../store";
+import {useExplorerStyles} from "./useExplorerStyles";
 
 let fetched = false;
 
-export default function Explorer(props) {
+export default connect(({explorerOpen}) => ({
+  isOpen: explorerOpen,
+  setOpen: (isOpen) => store.dispatch({type: "setExplorerOpen", value: isOpen}),
+}))(function Explorer({
+  isOpen,
+  setOpen,
+}) {
   const [data, setData] = React.useState(null);
+  const {root} = useExplorerStyles();
+  const toggleOpen = React.useCallback(() => setOpen(!isOpen), [isOpen]);
   const children = [];
 
   if (!fetched) {
@@ -43,13 +55,28 @@ export default function Explorer(props) {
   }
 
   return (
-    <TreeView
-      className="explorer-tree"
-      defaultCollapseIcon={<ArrowDropDownIcon />}
-      defaultExpandIcon={<ArrowRightIcon />}
-      disableSelection={true}
-    >
-      {children}
-    </TreeView>
+    <div className="explorer" style={{
+      display: !isOpen ? "none" : undefined,
+      minWidth: !isOpen ? "0px" : undefined,
+      width: !isOpen ? "0px" : undefined,
+      overflowX: !isOpen ? "hidden" : undefined,
+    }}>
+      <ExplorerHeader isOpen={isOpen} toggleOpen={toggleOpen} />
+      <TreeView
+        className={"explorer__tree " + (
+          isOpen ? "explorer__tree-open" : "explorer__tree-open"
+        )}
+        classes={{
+          root,
+        }}
+        defaultCollapseIcon={<ArrowDropDownIcon />}
+        defaultExpandIcon={<ArrowRightIcon />}
+        disableSelection={true}
+      >
+        {children}
+      </TreeView>
+    </div>
   );
-}
+});
+
+export {ExplorerHeader};

packages/webdoc-default-template/src/app/components/Explorer/index.js

@@ -1,22 +1,36 @@
 import {makeStyles} from "@material-ui/core/styles";
 
-export const useExplorerStyles = makeStyles({});
-/*
-makeStyles({
+const itemStyle = {
   label: {
-    color: "black",
-    fontSize: 13,
+    alignItems: "center",
+    display: "flex",
+    color: "#333333",
+    fontSize: 12,
+    height: "24px",
+    lineHeight: "14px",
   },
   labelLinks: {
-    color: "black",
+    color: "#333333",
   },
   iconContainer: {
-    color: "#A5A5A5",
+    color: "#333333",
     fontSize: 8,
     marginRight: 0,
   },
   selected: {
     backgroundColor: "none",
   },
+  root: {
+    padding: "0 8px",
+  },
+};
+
+export const useExplorerStyles = makeStyles(itemStyle);
+
+export const useExplorerCategoryStyles = makeStyles({
+  ...itemStyle,
+  label: {
+    ...itemStyle.label,
+    fontWeight: "bold",
+  },
 });
-*/