UI Overhaul

client/app/components/navbar/navbar.scss

@@ -0,0 +1,57 @@
+@import '../../scss/variables';
+
+.navbar {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  left: -$navbarWidth;
+  top: 50px;
+  height: calc(100% - 50px);
+  width: $navbarWidth;
+  background-color: $gray2;
+  border-right: 1px solid darken($gray2, 2%);
+  overflow-y: auto;
+  padding-bottom: 10px;
+  transition: 0.2s left ease-in-out;
+
+  &--open {
+    left: 0;
+  }
+}
+
+.navbar__item {
+  min-height: 50px;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: $white;
+  transition: background-color 0.1s linear, color 0.2s linear;
+
+  &:hover {
+    background-color: $gray1;
+  }
+
+  & + & {
+    border-top: 1px solid $gray3;
+  }
+}
+
+.navbar__item--active {
+  padding-left: 4px;
+  border-right: 4px solid $primaryBlue;
+  color: $primaryBlue !important;
+}
+
+.navbar__email {
+  padding-top: 10px;
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  color: $primaryBlue;
+  bottom: 2;
+  left: 2;
+  font-size: 12px;
+}

client/app/components/navbar/navbar.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { IClaims } from '../../model';
+import { OauthService, StorageService } from '../../services';
+import './navbar.scss';
+
+interface Props {
+  claims?: IClaims;
+  open: boolean;
+  onNavClick: () => void;
+}
+
+interface State {
+  oauthUrl?: string;
+}
+
+export class Navbar extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    this.loadOauthUrl();
+  }
+
+  async loadOauthUrl() {
+    const oauthUrl = await OauthService.getOauthUrl();
+    if (oauthUrl) {
+      this.setState({ oauthUrl });
+    }
+  }
+
+  private logout = () => {
+    StorageService.clear();
+    window.location.href = '/';
+  };
+
+  renderLoginButton() {
+    const { claims } = this.props;
+
+    if (!this.state.oauthUrl) {
+      return null;
+    }
+
+    return !claims ? (
+      <a href={this.state.oauthUrl} className="navbar__item">
+        Login
+      </a>
+    ) : (
+      <a className="navbar__item" onClick={this.logout}>
+        Logout
+      </a>
+    );
+  }
+
+  renderNavLink = (title: string, to: string, params?: any) => {
+    return (
+      <NavLink
+        {...params}
+        to={to}
+        className="navbar__item"
+        activeClassName="navbar__item--active"
+        onClick={this.props.onNavClick}
+      >
+        {title}
+      </NavLink>
+    );
+  };
+
+  render() {
+    const { claims, open } = this.props;
+    const openClass = open ? 'navbar--open' : '';
+    return (
+      <div className={'navbar ' + openClass}>
+        {this.renderNavLink('Soundboard', '/', { exact: true })}
+        {this.renderNavLink('Youtube Downloader', '/downloader')}
+        {this.renderNavLink('Clips', '/clips')}
+        {this.renderNavLink('Stats', '/stats')}
+        {this.renderLoginButton()}
+
+        {claims && claims.email && <div className="navbar__email">{claims.email}</div>}
+      </div>
+    );
+  }
+}