Add admin nav

src/components/AdminSidebar/AdminSidebar.scss

@@ -0,0 +1,22 @@
+@import "../../assets/scss/globals";
+
+.admin-sidebar {
+  display: flex;
+  flex-flow: column nowrap;
+  align-self: stretch;
+  margin-right: 1rem;
+}
+
+.admin-sidebar-item {
+  padding: 1rem;
+  background-color: $orange2;
+  border-left: 4px solid $orange2;
+
+  &:hover {
+    border-left: 4px solid $white;
+  }
+
+  &::after {
+    content: " ›";
+  }
+}

src/components/AdminSidebar/AdminSidebar.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+import "./AdminSidebar.scss";
+import AdminSidebarLink from "../AdminSidebarLink";
+
+export interface AdminSiderbarProps {
+  path: string;
+}
+export interface AdminSiderbarState {}
+
+class AdminSidebar extends React.Component<AdminSiderbarProps, AdminSiderbarState> {
+  render() {
+    const { path } = this.props;
+    return (
+      <div className="admin-sidebar">
+        <AdminSidebarLink to="/admin" path={path}>Home</AdminSidebarLink>
+        <AdminSidebarLink to="/admin/events" path={path}>Events</AdminSidebarLink>
+      </div>
+    );
+  }
+}
+
+export default AdminSidebar;

src/components/AdminSidebar/index.ts

@@ -0,0 +1,2 @@
+import AdminSidebar from "./AdminSidebar";
+export default AdminSidebar;

src/components/AdminSidebarLink/AdminSidebarLink.scss

@@ -0,0 +1,20 @@
+@import "../../assets/scss/globals";
+
+.admin-sidebar-link {
+  padding: 1rem 3rem 1rem 1rem;
+  background-color: $blue;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  line-height: 20px;
+  font-weight: bold;
+  border-left: 4px solid $blue;
+
+  &:hover,
+  &.active {
+    border-left: 4px solid $white;
+  }
+
+  &::after {
+    content: " ›";
+  }
+}

src/components/AdminSidebarLink/AdminSidebarLink.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+import "./AdminSidebarLink.scss";
+
+export interface AdminSidebarLinkProps {
+  to: string;
+  path: string;
+}
+export interface AdminSidebarLinkState {}
+
+class AdminSidebarLink extends React.Component<AdminSidebarLinkProps, AdminSidebarLinkState> {
+  render() {
+    const { to, path, children } = this.props;
+    const activeClass = to === path ? "active" : "";
+
+    return (
+      <Link to={to} className={`admin-sidebar-link ${activeClass}`}>
+        { children }
+      </Link>
+    );
+  }
+}
+
+export default AdminSidebarLink;

src/components/AdminSidebarLink/index.ts

@@ -0,0 +1,2 @@
+import AdminSidebarLink from "./AdminSidebarLink";
+export default AdminSidebarLink;

src/index.scss

@@ -14,6 +14,8 @@ body {
 #root {
   position: relative;
   min-height: 100vh;
+  display: flex;
+  flex-flow: column nowrap;
 }
 
 body {

src/pages/AdminCommonPage/AdminCommonPage.scss

@@ -0,0 +1,7 @@
+.admin-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex: 1;
+}

src/pages/AdminCommonPage/AdminCommonPage.tsx

@@ -1,18 +1,28 @@
 import * as React from "react";
 import AdminHeader from "../../components/AdminHeader";
+import AdminSidebar from "../../components/AdminSidebar";
+import "./AdminCommonPage.scss";
 
 export interface AdminCommonPageProps {
   page: any;
+  match: {
+    path: string;
+  };
 }
 export interface AdminCommonPageState { }
 
 class AdminCommonPage extends React.Component<AdminCommonPageProps, AdminCommonPageState> {
   render() {
     const Page = this.props.page;
+    const { path } = this.props.match;
+
     return (
       <React.Fragment>
         <AdminHeader />
-        <Page {...this.props} />
+        <div className="admin-container">
+          <AdminSidebar path={path} />
+          <Page {...this.props} />
+        </div>
       </React.Fragment>
     );
   }

src/pages/AdminEventPage/AdminEventPage.scss

@@ -1,3 +1,3 @@
 .admin-event-page {
-  padding: 1rem;
+  margin: 0 1rem;
 }

src/pages/AdminFrontPage/AdminFrontPage.scss

@@ -1,3 +1,3 @@
 .admin-front-page {
-  padding: 1rem;
+  margin: 0 1rem;
 }