Use Next.js

dashboard/.gitignore

@@ -1,23 +1,5 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
 /node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+/.next
 
-npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

dashboard/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

dashboard/package.json

@@ -2,54 +2,29 @@
   "name": "dashboard",
   "version": "0.1.0",
   "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
   "dependencies": {
-    "@tailwindcss/forms": "^0.2.1",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/classnames": "^2.2.11",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-router-dom": "^5.1.7",
-    "autoprefixer": "^9.8.6",
-    "classnames": "^2.2.6",
-    "postcss": "^7.0.35",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.2",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "tailwindcss": "latest",
+    "postcss": "latest",
+    "autoprefixer": "latest",
+    "@tailwindcss/forms": "latest"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "build:tailwind": "tailwindcss build src/index.css -o src/tailwind.output.css",
-    "prestart": "npm run build:tailwind",
-    "prebuild": "npm run build:tailwind"
+  "devDependencies": {
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      "react-app"
     ]
   }
 }

dashboard/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

dashboard/src/components/Menu.tsx

@@ -0,0 +1,72 @@
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+
+export interface MenuEntry {
+    icon?: string; 
+    title: string; 
+    link: string;
+}
+
+export function Menu(props: { entries: MenuEntry[] }) {
+    const currentPath = useRouter().pathname;
+    return <header className="lg:px-28 px-10 bg-white flex flex-wrap items-center pt-3">
+        <style dangerouslySetInnerHTML={{
+            __html: `
+                #menu-toggle:checked+#menu {
+                    display: block;
+                }
+                `}} />
+        <div className="flex justify-between items-center pr-3 pb-2">
+            <Link href="/">
+                <a>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 64 64">
+                        <path d="M54.217 19.173L32.007 32v2.86h-.014v7.593h.014v8.678l16.637-9.53v-6.346L37.485 41.6v-6.414l16.746-9.532V44.84L32.007 57.56V64L59.71 48V16z" fill="#0091ce" />
+                        <path d="M4.292 48l27.715 16v-6.44l-22.2-12.72V19.186L4.292 16zm27.715 3.132V32l-16.624-9.6-.014.014V41.6z" fill="#0086bd" />
+                        <path d="M59.708 16.014V16l-27.7-16L4.292 16l5.505 3.186 22.2-12.814 22.2 12.8L59.708 16zm-27.7-3.2L15.383 22.4 32.007 32l16.624-9.6z" fill="#18a5e3" />
+                    </svg>
+                </a>
+            </Link>
+        </div>
+        <div className="lg:hidden flex-grow" />
+        <label htmlFor="menu-toggle" className="pointer-cursor lg:hidden block">
+            <svg className="fill-current text-gray-700"
+                xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+                <title>menu</title>
+                <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+            </svg>
+        </label>
+        <input className="hidden" type="checkbox" id="menu-toggle" />
+        <div className="hidden lg:flex lg:flex-1 lg:items-center lg:w-auto w-full" id="menu">
+            <nav>
+                <ul className="lg:flex lg:flex-1 items-center justify-between text-base text-gray-700 pt-4 lg:pt-0">
+                    {props.entries.map(e => {
+                        let classes = "flex block py-4 border-b-4 border-transparent font-medium";
+                        if (e.link.toLowerCase().startsWith(currentPath)) {
+                            classes += " border-gray-700";
+                        } else {
+                            classes += " text-gray-500 hover:border-gray-400 ";
+                        }
+                        return <li className="lg:px-4 px-0" key={e.title}>
+                            <Link href={e.link}>
+                                <a className={classes}>
+                                    {e.icon ? <img className="w-4 y-3 pr-1" src={e.icon} /> : null}
+                                    <div>{e.title}</div>
+                                </a>
+                            </Link>
+                        </li>;
+                    }
+                    )}
+                </ul>
+            </nav>
+            <div className="flex-1" />
+            <Link href="/settings/account">
+                <a className="lg:ml-4 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto">
+                    <img className="rounded-full w-8 h-8 border-2 border-transparent hover:border-indigo-400"
+                        src="https://avatars.githubusercontent.com/u/5750?s=400&u=95c71e43d35f4b2f7ea95474f5058bb51986f556&v=4" alt="Andy Leverenz" />
+                </a>
+            </Link>
+        </div>
+    </header>;
+}
+
+export default Menu;

dashboard/src/components/SubMenu.tsx

@@ -1,22 +1,20 @@
-export interface SubMenuEntry {
-    title: string
-    href: string
-    hover?: string
-}
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { MenuEntry } from './Menu';
 
-export function SubMenu(props: { menuEntries: SubMenuEntry[] }) {
-    const active = (window.location.hash.substring(1) || props.menuEntries[0].title).toLowerCase()
+export function SubMenu(props: { menuEntries: MenuEntry[] }) {
+    const currentPath = useRouter().pathname.toLowerCase();
     return <div>
-        <ul className="lg:flex lg:flex-1 items-center lg:space-x-8 text-base text-gray-700 pt-4 lg:pt-0">
+        <ul className="lg:flex lg:flex-1 items-center lg:space-x-2 text-gray-700 lg:pt-4 lg:pt-0">
             {props.menuEntries.map(e => {
-                let classes = "flex block py-4 border-b-4 border-transparent font-medium";
-                if (e.title.toLowerCase() === active) {
-                    classes += " border-gray-700";
+                let classes = "flex block lg:py-4 pb-2 border-b-4 border-transparent text-base px-4";
+                if (e.link === currentPath) {
+                    classes += " lg:border-gray-700 font-medium";
                 } else {
                     classes += " text-gray-500 hover:border-gray-400 ";
                 }
-                return <li className={classes}>
-                    <a href={e.href}>{e.title}</a>
+                return <li className={classes} key={e.title}>
+                    <Link href={e.link}>{e.title}</Link>
                 </li>;
             })}
         </ul>

dashboard/src/components/ThirdMenu.tsx

@@ -1,22 +1,21 @@
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { MenuEntry } from './Menu';
 
-export interface ThirdMenuEntry {
-    title: string
-    href: string
-}
 
-export function ThirdMenu(props: { entries: ThirdMenuEntry[]}) {
-    const active = (window.location.hash.substring(1) || props.entries[0].title).toLowerCase()
+export function ThirdMenu(props: { entries: MenuEntry[]}) {
+    const currentPath = useRouter().pathname;
     return <div>
         <ul className="flex flex-col text-base text-gray-700 pt-4 lg:pt-0">
             {props.entries.map(e => {
-                let classes = "flex block py-2 font-sm px-4 rounded-lg";
-                if (e.title.toLowerCase() === active) {
+                let classes = "flex block mb-1 py-1 text-sm px-4 rounded-lg";
+                if (e.link.toLowerCase().startsWith(currentPath)) {
                     classes += " bg-gray-700 text-gray-100 ";
                 } else {
                     classes += " text-gray-400 hover:bg-gray-300 hover:text-white ";
                 }
                 return <li className={classes}>
-                    <a href={e.href}>{e.title}</a>
+                    <Link href={e.link}>{e.title}</Link>
                 </li>;
             })}
         </ul>

dashboard/src/components/Toggle.tsx

@@ -4,7 +4,7 @@ function Toggle(props: { entries: { title: string, onActivate: ()=>void}[], acti
     const [active, setActive] = useState(props.active || props.entries[0].title);
     return <div className="px-4 flex">
         {props.entries.map((e, i) => {
-            let className = "mt-1 block w-20 text-sm border-2 border-gray-200 focus:outline-none";
+            let className = "mt-1 block w-20 text-sm border-2 border-gray-200 focus:outline-none focus:border-blue-400";
             if (active === e.title) {
                 className += " text-gray-600 bg-gray-200";
             } else {
@@ -14,7 +14,7 @@ function Toggle(props: { entries: { title: string, onActivate: ()=>void}[], acti
                 className += " rounded-l-md";
             }
             if (i === props.entries.length - 1) {
-                className += " border-l-0 rounded-r-md";
+                className += " rounded-r-md";
             }
             const onClick = () => {
                 setActive(e.title);