UI: set correct menu

browser/goliac-ui/.env

@@ -0,0 +1,2 @@
+BASE_URL=""
+VUE_APP_API_URL="http://127.0.0.1:18000/api/v1"

browser/goliac-ui/.env.production

@@ -0,0 +1 @@
+VUE_APP_API_URL="api/v1"

browser/goliac-ui/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

browser/goliac-ui/package.json

@@ -8,9 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "axios": "^1.5.0",
     "core-js": "^3.8.3",
-    "element-plus": "^1.0.2-beta.28",
+    "element-plus": "^2.3.12",
     "vue": "^3.2.13",
     "vue-router": "^4.0.13"
   },

browser/goliac-ui/src/App.vue

@@ -1,41 +1,59 @@
+<script setup>
+import { User, MessageBox, Folder } from '@element-plus/icons-vue'
+</script>
+
 <template>
-  <div id="app">
-    <el-row style="background-color:#000000; height:40px;">
-      <el-col :span="22" :offset="2" style="margin-top:8px;">
-        <router-link :to="{ name: 'dashboard' }">
-          <span style="color:#ffffff;">Goliac</span>
-        </router-link>
-      </el-col>
-    </el-row>
-    <el-row>
-      &nbsp;
-    </el-row>
-    <div class="router-view-container">
-      <router-view></router-view>
-    </div>
+ <div id="app">
+    <el-container>
+      <el-aside width="130px">
+        <el-menu>
+          <el-menu-item index="1" style="justify-content: center">
+            <template #title>
+              <img src="/logo.png">
+            </template>
+          </el-menu-item>
+          <el-menu-item index="2">
+            <template #title>
+              <el-icon :size="16"><User /></el-icon>Users
+            </template>
+          </el-menu-item>
+          <el-menu-item index="3">
+            <template #title>
+              <el-icon :size="16"><MessageBox /></el-icon>Teams
+            </template>
+          </el-menu-item>
+          <el-menu-item index="4">
+            <template #title>
+              <el-icon :size="16"><Folder /></el-icon>Repositories
+            </template>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+
+      <el-container>
+        <el-main>
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>
 
 <script>
-
 export default {
   name: 'App',
 }
+
 </script>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: left;
-  color: #2c3e50;
+<style scoped>
+.layout-container .el-header {
+  position: relative;
+  background-color: var(--el-color-primary-light-7);
+  color: var(--el-text-color-primary);
 }
-
-a:link { text-decoration: none; }
-a:visited { text-decoration: none; }
-a:hover { text-decoration: none; }
-a:active { text-decoration: none; }
-
-
-</style>
+.layout-container .el-aside {
+  color: var(--el-text-color-primary);
+  background: var(--el-color-primary-light-8);
+}
+</style>

browser/goliac-ui/src/components/DashboardApp.vue

@@ -9,7 +9,14 @@
       </span>
     </template>
   </el-dialog>
-  test
+
+  <el-breadcrumb separator="/">
+    <el-breadcrumb-item :to="{ path: '/' }">dashboard</el-breadcrumb-item>
+  </el-breadcrumb>
+  <el-divider />
+
+test
+<el-button @click="flushcache">Flush cache</el-button>
 </template>
 
 <script>

browser/goliac-ui/src/plugins/element.js

@@ -1,5 +1,5 @@
 import ElementPlus from 'element-plus'
-import 'element-plus/lib/theme-chalk/index.css'
+import 'element-plus/dist/index.css'
 
 export default (app) => {
   app.use(ElementPlus)