Merge pull request #1395 from chhsiao1981/refactor-sidebar

refactor sidebar and notfound

Author: chhsiao1981

src/components/NewLibrary/components/Cart.tsx

@@ -22,10 +22,10 @@ import { Drawer, List, Popconfirm, Space } from "../../Antd";
 import { DotsIndicator, EmptyStateComponent } from "../../Common";
 import { CheckCircleIcon, CloseIcon, FileIcon, FolderIcon } from "../../Icons";
 import {
-  ShowInFolder,
-  TitleNameClipped,
   elipses,
   formatBytesWithPadding,
+  ShowInFolder,
+  TitleNameClipped,
 } from "../utils/longpress";
 import "./Cart.css";
 

src/components/NotFound/index.tsx

@@ -1,7 +1,7 @@
 import { Alert } from "@patternfly/react-core";
 import WrapperConnect from "../Wrapper";
 
-const NotFound = () => {
+export default () => {
   return (
     <WrapperConnect>
       <Alert
@@ -17,5 +17,3 @@ const NotFound = () => {
     </WrapperConnect>
   );
 };
-
-export default NotFound;

src/components/Wrapper/AnonSidebar.tsx

@@ -0,0 +1,61 @@
+import {
+  Brand,
+  Nav,
+  NavGroup,
+  NavItem,
+  NavList,
+  PageSidebar,
+  PageSidebarBody,
+} from "@patternfly/react-core";
+import { Link } from "react-router-dom";
+import brandImg from "../../assets/logo_chris_dashboard.png";
+import styles from "./Sidebar.module.css";
+
+type Props = {
+  isNavOpen?: boolean;
+  sidebarActiveItem?: string;
+};
+
+export default (props: Props) => {
+  const { isNavOpen, sidebarActiveItem } = props;
+
+  return (
+    <PageSidebar isSidebarOpen={isNavOpen}>
+      <PageSidebarBody>
+        <div className={styles["page-sidebar"]}>
+          <div className={styles.nav}>
+            {" "}
+            <Nav>
+              <NavList>
+                <NavGroup title="Discover ChRIS">
+                  <NavItem
+                    itemId="overview"
+                    isActive={sidebarActiveItem === "overview"}
+                  >
+                    <Link to="/">Overview</Link>
+                  </NavItem>
+                  <NavItem
+                    itemId="shared"
+                    isActive={sidebarActiveItem === "shared"}
+                  >
+                    <Link to="/shared">Shared Data</Link>
+                  </NavItem>
+
+                  <NavItem
+                    itemId="package"
+                    isActive={sidebarActiveItem === "package"}
+                  >
+                    <Link to="/package">Browse Packages</Link>
+                  </NavItem>
+                </NavGroup>
+              </NavList>
+            </Nav>
+          </div>
+          <div className={styles.brand}>
+            <Brand src={brandImg} alt="ChRIS Logo" />
+          </div>
+        </div>
+      </PageSidebarBody>
+    </PageSidebar>
+  );
+};

src/components/Wrapper/Sidebar.module.css

@@ -17,4 +17,18 @@
 
 .hide {
     display: none;
+}
+
+.page-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.nav {
+    flex-grow: 1;
+}
+
+.brand {
+    padding: 16px;
 }