Replace top bar

Makefile

@@ -3,7 +3,7 @@
 binary: go-binary ui
 
 go-binary:
-	go-bindata-assetfs -prefix ui/public ui/public
+	go-bindata-assetfs -prefix ui/dist ui/dist
 	go build .
 
 ui:

ui/package-lock.json

@@ -1100,6 +1100,19 @@
             "integrity": "sha512-aXAa1Pv6w32URacE9LfMsl9zI6hFwx1K0Lp3Xpyf4rAkmaAB6z0gOkhicOrVFc0f64YheJgHjE7hJFieVenQdw==",
             "dev": true
         },
+        "@material/icon-button": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-3.2.0.tgz",
+            "integrity": "sha512-UTX1q4x5FxntBeb5TxBsXIjbhwFjQxJxovaUGo8+eUL9V9tU6rJ3NnlrFirx9gZnFIU1Xpssm91NCItVZy/Dpg==",
+            "dev": true,
+            "requires": {
+                "@material/base": "^3.1.0",
+                "@material/feature-targeting": "^3.1.0",
+                "@material/ripple": "^3.2.0",
+                "@material/theme": "^3.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
         "@material/ripple": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-3.2.0.tgz",
@@ -1138,6 +1151,24 @@
                 "@material/feature-targeting": "^3.1.0"
             }
         },
+        "@material/top-app-bar": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@material/top-app-bar/-/top-app-bar-3.2.0.tgz",
+            "integrity": "sha512-p3PuCIbg0uDveS30D1R8/fcwqeTMXe4oRFnB6Z5Wlej0NySi6038i+TPsHtgYLCR3QpVThnkVch37zyXcNpQoQ==",
+            "dev": true,
+            "requires": {
+                "@material/animation": "^3.1.0",
+                "@material/base": "^3.1.0",
+                "@material/elevation": "^3.1.0",
+                "@material/icon-button": "^3.2.0",
+                "@material/ripple": "^3.2.0",
+                "@material/rtl": "^3.2.0",
+                "@material/shape": "^3.1.0",
+                "@material/theme": "^3.1.0",
+                "@material/typography": "^3.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
         "@material/typography": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@material/typography/-/typography-3.1.0.tgz",
@@ -1213,6 +1244,17 @@
                 "@material/ripple": "^3.1.0"
             }
         },
+        "@smui/top-app-bar": {
+            "version": "1.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@smui/top-app-bar/-/top-app-bar-1.0.0-beta.16.tgz",
+            "integrity": "sha512-iI4wzwier6VuxBJ/9XumRetoZf+7Y7wRy/3Vc2f4Tvy4jYj9131LjYvwdL6TlO+m/pNZnvCt92bGRGPIZ30sQA==",
+            "dev": true,
+            "requires": {
+                "@material/feature-targeting": "^3.1.0",
+                "@material/top-app-bar": "^3.1.0",
+                "@smui/common": "^1.0.0-beta.15"
+            }
+        },
         "@types/anymatch": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",

ui/package.json

@@ -4,7 +4,7 @@
     "description": "Wireguard VPN web UI",
     "main": "index.js",
     "scripts": {
-        "dev": "webpack-dev-server --mode=development --open",
+        "dev": "webpack-dev-server --mode=development --open --port 5000",
         "build": "cross-env NODE_ENV=production webpack --mode=production --progress",
         "test": "jest",
         "prettier": "prettier --check ./src/**/*.{js,css,json,md}"
@@ -19,7 +19,8 @@
         "@babel/core": "^7.6.2",
         "@babel/preset-env": "^7.6.2",
         "@material/typography": "^3.1.0",
-        "@smui/button": "^1.0.0-beta.10",
+        "@smui/button": "^1.0.0-beta.16",
+        "@smui/top-app-bar": "^1.0.0-beta.16",
         "babel-jest": "^24.9.0",
         "babel-loader": "^8.0.6",
         "clean-webpack-plugin": "^3.0.0",

ui/src/App.svelte

@@ -1,3 +1,7 @@
+<svelte:head>
+  <title>Wireguard VPN</title>
+</svelte:head>
+
 <script>
   import { onMount } from 'svelte';
   import { Router, Link, Route } from "svelte-routing";
@@ -13,6 +17,7 @@
   export let url = "";
 </script>
 
+<div class="mdc-typography">
 <Router url="{url}">
   <Nav user="{user}" />
   <main role="main" class="container">
@@ -23,3 +28,4 @@
     </div>
   </main>
 </Router>
+</div>

ui/src/Nav.svelte

@@ -1,4 +1,5 @@
 <script>
+  import TopAppBar, {Row, Section, Title} from "@smui/top-app-bar";
   import { Router, Link, Route } from "svelte-routing";
   import About from "./About.svelte";
   import Clients from "./Clients.svelte";
@@ -7,21 +8,13 @@
   export let user;
 </script>
 
-<header>
+<TopAppBar variant="static" color="primary">
-  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+  <Row>
-    <a class="navbar-brand" href="/">Wireguard VPN</a>
+    <Section>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+      <Title>Wireguard VPN</Title>
-      <span class="navbar-toggler-icon"></span>
+    </Section>
-    </button>
+    <Section align="end" toolbar>
-    <div class="collapse navbar-collapse" id="navbarCollapse">
+     Logged in as {user}
-      <ul class="navbar-nav mr-auto">
+    </Section>
-        <li class="nav-item"><NavLink to="/">Clients</NavLink></li>
+  </Row>
-        <li class="nav-item"><NavLink to="about">About</NavLink></li>
+</TopAppBar>
-      </ul>
-    </div>
-
-    <div class="text-light">
-     <small>Logged in as {user}</small>
-    </div>
-  </nav>
-</header>

ui/src/index.ejs

@@ -6,6 +6,9 @@
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title><%= htmlWebpackPlugin.options.title %></title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
 </head>
 <body>
 </body>

ui/src/style.scss

@@ -1,4 +1,8 @@
-body {
+@import "@material/typography/mdc-typography";
-    background-color: aliceblue;
+
-    color: #ff392d;
+.container {
+  padding: 30px;
+}
+
+body {
 }

ui/theme/_smui-theme.scss

@@ -0,0 +1 @@
+// Nothing here. Just use the default theme.

ui/webpack.config.js

@@ -61,7 +61,14 @@ module.exports = {
                      * */
                     prod ? MiniCssExtractPlugin.loader : "style-loader",
                     "css-loader",
-                    "sass-loader"
+                    {
+                        loader: "sass-loader",
+                        options: {
+                            sassOptions: {
+                                includePaths: ["./theme", "./node_modules"]
+                            }
+                        }
+                    }
                 ]
             },
             {