From ef28a3f4b98406617edcfb4c8464089189862be4 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan.tuomi@eficode.com>
Date: Tue, 15 Jan 2019 12:20:49 +0200
Subject: [PATCH] Add admin nav

---
 src/components/AdminSidebar/AdminSidebar.scss | 22 +++++++++++++++++
 src/components/AdminSidebar/AdminSidebar.tsx  | 23 ++++++++++++++++++
 src/components/AdminSidebar/index.ts          |  2 ++
 .../AdminSidebarLink/AdminSidebarLink.scss    | 20 ++++++++++++++++
 .../AdminSidebarLink/AdminSidebarLink.tsx     | 24 +++++++++++++++++++
 src/components/AdminSidebarLink/index.ts      |  2 ++
 src/index.scss                                |  2 ++
 .../AdminCommonPage/AdminCommonPage.scss      |  7 ++++++
 src/pages/AdminCommonPage/AdminCommonPage.tsx | 12 +++++++++-
 src/pages/AdminEventPage/AdminEventPage.scss  |  2 +-
 src/pages/AdminFrontPage/AdminFrontPage.scss  |  2 +-
 11 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 src/components/AdminSidebar/AdminSidebar.scss
 create mode 100644 src/components/AdminSidebar/AdminSidebar.tsx
 create mode 100644 src/components/AdminSidebar/index.ts
 create mode 100644 src/components/AdminSidebarLink/AdminSidebarLink.scss
 create mode 100644 src/components/AdminSidebarLink/AdminSidebarLink.tsx
 create mode 100644 src/components/AdminSidebarLink/index.ts
 create mode 100644 src/pages/AdminCommonPage/AdminCommonPage.scss

diff --git a/src/components/AdminSidebar/AdminSidebar.scss b/src/components/AdminSidebar/AdminSidebar.scss
new file mode 100644
index 0000000..e80e34f
--- /dev/null
+++ b/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: " ›";
+  }
+}
diff --git a/src/components/AdminSidebar/AdminSidebar.tsx b/src/components/AdminSidebar/AdminSidebar.tsx
new file mode 100644
index 0000000..2f21ce5
--- /dev/null
+++ b/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;
diff --git a/src/components/AdminSidebar/index.ts b/src/components/AdminSidebar/index.ts
new file mode 100644
index 0000000..a4ca9be
--- /dev/null
+++ b/src/components/AdminSidebar/index.ts
@@ -0,0 +1,2 @@
+import AdminSidebar from "./AdminSidebar";
+export default AdminSidebar;
diff --git a/src/components/AdminSidebarLink/AdminSidebarLink.scss b/src/components/AdminSidebarLink/AdminSidebarLink.scss
new file mode 100644
index 0000000..b2148ae
--- /dev/null
+++ b/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: " ›";
+  }
+}
diff --git a/src/components/AdminSidebarLink/AdminSidebarLink.tsx b/src/components/AdminSidebarLink/AdminSidebarLink.tsx
new file mode 100644
index 0000000..df424aa
--- /dev/null
+++ b/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;
diff --git a/src/components/AdminSidebarLink/index.ts b/src/components/AdminSidebarLink/index.ts
new file mode 100644
index 0000000..d87b2bf
--- /dev/null
+++ b/src/components/AdminSidebarLink/index.ts
@@ -0,0 +1,2 @@
+import AdminSidebarLink from "./AdminSidebarLink";
+export default AdminSidebarLink;
diff --git a/src/index.scss b/src/index.scss
index be63c6f..405e044 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -14,6 +14,8 @@ body {
 #root {
   position: relative;
   min-height: 100vh;
+  display: flex;
+  flex-flow: column nowrap;
 }
 
 body {
diff --git a/src/pages/AdminCommonPage/AdminCommonPage.scss b/src/pages/AdminCommonPage/AdminCommonPage.scss
new file mode 100644
index 0000000..3b72073
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/AdminCommonPage/AdminCommonPage.tsx b/src/pages/AdminCommonPage/AdminCommonPage.tsx
index 3c118fd..1cd31f1 100644
--- a/src/pages/AdminCommonPage/AdminCommonPage.tsx
+++ b/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>
     );
   }
diff --git a/src/pages/AdminEventPage/AdminEventPage.scss b/src/pages/AdminEventPage/AdminEventPage.scss
index 2241842..b89e4d4 100644
--- a/src/pages/AdminEventPage/AdminEventPage.scss
+++ b/src/pages/AdminEventPage/AdminEventPage.scss
@@ -1,3 +1,3 @@
 .admin-event-page {
-  padding: 1rem;
+  margin: 0 1rem;
 }
diff --git a/src/pages/AdminFrontPage/AdminFrontPage.scss b/src/pages/AdminFrontPage/AdminFrontPage.scss
index 55c7970..28fc775 100644
--- a/src/pages/AdminFrontPage/AdminFrontPage.scss
+++ b/src/pages/AdminFrontPage/AdminFrontPage.scss
@@ -1,3 +1,3 @@
 .admin-front-page {
-  padding: 1rem;
+  margin: 0 1rem;
 }