Add configuration submenu and mobile navigation (#74)

* Add submenu a mobile navigation

* Fix prettier issue

* Remove unnecessary navigation items. Update URLs in submenu

* Add Functions link. Remove Sidebar

src/components/Header/Header.css

@@ -1,8 +1,3 @@
-/* Temporary. We will fix it in the HEx design system */
-.header__nav__user a {
-  color: #ffffff;
-}
-
-.header__nav__user a:hover {
-  color: #f9b479;
+.header .header__nav-config {
+  justify-content: flex-end;
 }

src/components/Header/Header.tsx

@@ -1,15 +1,27 @@
 import * as React from "react";
+import { connect } from "react-redux";
 import { NavLink } from "react-router-dom";
 import logo from "../../logo.svg";
 
+import { IRouterPathname } from "../../shared/types";
+
 import HeaderLink, { IHeaderLinkProps } from "./HeaderLink";
 
 // Icons
 import Cog from "!react-svg-loader!open-iconic/svg/cog.svg";
 
 import "./Header.css";
 
-class Header extends React.Component {
+interface IHeaderProps {
+  pathname: string;
+}
+
+interface IHeaderState {
+  configOpen: boolean;
+  mobileOpen: boolean;
+}
+
+class Header extends React.Component<IHeaderProps, IHeaderState> {
   // Defines the route
   private readonly links: IHeaderLinkProps[] = [
     {
@@ -22,22 +34,54 @@ class Header extends React.Component {
       to: "/charts",
     },
     {
-      children: "Service Catalog",
-      to: "/services",
+      children: "Functions",
+      external: true,
+      to: "/kubeless/",
     },
   ];
 
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      configOpen: false,
+      mobileOpen: false,
+    };
+  }
+
+  public componentWillReceiveProps(newProps: IHeaderProps) {
+    if (newProps.pathname !== this.props.pathname) {
+      this.setState({ configOpen: false, mobileOpen: false });
+    }
+  }
+
   public render() {
+    const header = `header ${this.state.mobileOpen ? "header-open" : ""}`;
+    const submenu = `header__nav__submenu ${
+      this.state.configOpen ? "header__nav__submenu-open" : ""
+    }`;
+
     return (
       <section className="gradient-135-brand type-color-reverse type-color-reverse-anchor-reset">
         <div className="container">
-          <header className="header">
+          <header className={header}>
             <div className="header__logo">
               <NavLink to="/">
                 <img src={logo} alt="Kubeapps logo" />
               </NavLink>
             </div>
             <nav className="header__nav">
+              <button
+                className="header__nav__hamburguer"
+                aria-label="Menu"
+                aria-haspopup="true"
+                aria-expanded="false"
+                onClick={this.toggleMobile}
+              >
+                <div />
+                <div />
+                <div />
+              </button>
               <ul className="header__nav__menu" role="menubar">
                 {this.links.map(link => (
                   <li key={link.to}>
@@ -46,16 +90,60 @@ class Header extends React.Component {
                 ))}
               </ul>
             </nav>
-            <div className="header__nav__user">
-              <HeaderLink to="/config">
-                <Cog className="icon icon-small margin-r-tiny" /> Configuration
-              </HeaderLink>
+            <div className="header__nav header__nav-config">
+              <ul className="header__nav__menu" role="menubar">
+                <li
+                  onMouseEnter={this.openSubmenu}
+                  onMouseLeave={this.closeSubmenu}
+                  onClick={this.toggleSubmenu}
+                >
+                  <a>
+                    <Cog className="icon icon-small margin-r-tiny" /> Configuration
+                  </a>
+                  <ul role="menu" aria-label="Products" className={submenu}>
+                    <li role="none">
+                      <NavLink to="/config/repos">App Repositories</NavLink>
+                    </li>
+                    <li role="none">
+                      <NavLink to="/config/brokers">Service Brokers</NavLink>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
             </div>
           </header>
         </div>
       </section>
     );
   }
+
+  private isTouchDevice = (): boolean => {
+    return "ontouchstart" in document.documentElement;
+  };
+
+  private toggleMobile = () => {
+    this.setState({ mobileOpen: !this.state.mobileOpen });
+  };
+
+  private openSubmenu = () => {
+    if (!this.isTouchDevice()) {
+      this.setState({ configOpen: true });
+    }
+  };
+
+  private closeSubmenu = () => {
+    if (!this.isTouchDevice()) {
+      this.setState({ configOpen: false });
+    }
+  };
+
+  private toggleSubmenu = () => {
+    this.setState({ configOpen: !this.state.configOpen });
+  };
 }
 
-export default Header;
+const mapStateToProps = ({ router: { location: { pathname } } }: IRouterPathname): IHeaderProps => {
+  return { pathname };
+};
+
+export default connect(mapStateToProps)(Header);

src/components/Header/HeaderLink.tsx

@@ -5,15 +5,17 @@ import { NavLink } from "react-router-dom";
 export interface IHeaderLinkProps {
   to: string;
   exact?: boolean;
+  external?: boolean;
   children?: React.ReactChildren | React.ReactNode | string;
 }
 
 class HeaderLink extends React.Component<IHeaderLinkProps> {
   public static defaultProps: Partial<IHeaderLinkProps> = {
     exact: false,
+    external: false,
   };
 
-  public render() {
+  public renderInternalLink() {
     return (
       <NavLink
         to={this.props.to}
@@ -25,6 +27,18 @@ class HeaderLink extends React.Component<IHeaderLinkProps> {
       </NavLink>
     );
   }
+
+  public renderExternalLink() {
+    return (
+      <a href={this.props.to} className="header__nav__menu__item">
+        {this.props.children}
+      </a>
+    );
+  }
+
+  public render() {
+    return this.props.external ? this.renderExternalLink() : this.renderInternalLink();
+  }
 }
 
 export default HeaderLink;

src/components/ProvisionButton/index.tsx

@@ -42,7 +42,16 @@ class ProvisionButton extends React.Component<IProvisionButtonProps, IProvisionB
     isProvisioning: false,
     modalIsOpen: false,
     namespace: "default",
-    parameters: JSON.stringify({ resourceGroup: "default", location: "eastus", firewallStartIPAddress: "0.0.0.0", firewallEndIPAddress: "255.255.255.255" }, undefined, 2),
+    parameters: JSON.stringify(
+      {
+        firewallEndIPAddress: "255.255.255.255",
+        firewallStartIPAddress: "0.0.0.0",
+        location: "eastus",
+        resourceGroup: "default",
+      },
+      undefined,
+      2,
+    ),
     releaseName: "",
     selectedClass: this.props.selectedClass,
     selectedPlan: this.props.selectedPlan,

src/shared/types.ts

@@ -308,3 +308,11 @@ export interface IHelmReleaseConfigMap {
     release: string;
   };
 }
+
+export interface IRouterPathname {
+  router: {
+    location: {
+      pathname: string;
+    };
+  };
+}