Convert main page to semantic UI

src/resources/index.html

@@ -13,7 +13,7 @@
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js" integrity="sha256-B8zvQ+y1lIQkcm+EJyCis+7AgsnzaTCBAHgkrPFQr9A=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/ansi_up@1.3.0/ansi_up.js" integrity="sha256-2UR0QYPMTIY0yP5S6ubBS7wFNKhn8uW7pV5E3LlvI6U=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc=" crossorigin="anonymous">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" integrity="sha256-UXesixbeLkB/UYxVTzuj/gg3+LMzgwAmg3zD+C4ZASQ=" crossorigin="anonymous">
  <link href="css/app.css" rel="stylesheet">
  <link href="custom/style.css" rel="stylesheet">
  <script src="js/app.js" defer></script>
@@ -240,14 +240,15 @@
  </div></template>
 
  <div id="app">
-  <nav class="navbar navbar-inverse">
-   <div>
-    <router-link to="/" class="navbar-brand"><img src="icon.png">{{title}}</router-link>
-    <router-link to="/jobs" class="btn navbar-btn pull-right">Jobs</router-link>
-   </div>
+    <nav class="ui left visible vertical inverted sidebar labeled icon menu">
+      <span class="item"><img class="icon" src="icon.png">{{title}}</span>
+      <router-link to="/" class="item"><i class="bar chart icon"></i>Status</router-link>
+      <router-link to="/jobs" class="item"><i class="tasks icon"></i>Jobs</router-link>
+      <a v-on:click="toggleNotifications(!notify)" v-show="supportsNotifications" class="item" :class="{'active':notify}" :title="(notify?'Disable':'Enable')+' notifications'"><i class="bell icon"></i>&#128276;</a>
   </nav>
-  <a v-on:click="toggleNotifications(!notify)" v-show="supportsNotifications" class="bell pull-right" :class="{'active':notify}" :title="(notify?'Disable':'Enable')+' notifications'">&#128276;</a>
+    <div class="pusher">
   <router-view></router-view>
+    </div>
   <div v-show="!connected" id="popup-connecting"><span class="status spin">⚙&#xfe0e;</span>&nbsp;Connecting...</div>
  </div>
 </body>