Merge pull request #75 from webdoc-labs/design/app-bar

Design: App bar + explorer + page-content + members-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.5",
     "@webdoc/template-library": "^1.1.5",
     "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

@@ -1,17 +1,17 @@
+import {useExplorerCategoryStyles, useExplorerStyles} from "./useExplorerStyles";
 import ExplorerTargetGroup from "./ExplorerCategoryItem";
 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";
-
 
 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 +23,8 @@ export default function ExplorerItem(props) {
     i++;
   }
 
+  const classes = i > 0 ? classesCategory : classesItem;
+
   return (
     <TreeItem
       className="explorer-tree__target"