diff --git a/components/app.vue b/components/app.vue
index d300780..b81436a 100644
--- a/components/app.vue
+++ b/components/app.vue
@@ -1,12 +1,13 @@
<template>
<div class="panel">
-<side-bar :role="user.status">
+<side-bar :role="user.status" :active="active">
</side-bar>
+<div>{{active}}, {{hash}}</div>
+
<div v-if="loading">
</div>
-
<div v-else-if="!loading"></div>
</div>
@@ -22,12 +23,32 @@ const user = {
status: 1,
}
+function active() {
+ if (this.hash == '' || this.hash == '#') {
+ return 1
+ } else if (/^#new\/?/.exec(this.hash)) {
+ return 2
+ } else if (/^#estimates\/?/.exec(this.hash)) {
+ return 3
+ } else if (/^#settings\/?/.exec(this.hash)) {
+ return 4
+ } else if (/^#sign-out\/?/.exec(this.hash)) {
+ return 5
+ } else {
+ return 0
+ }
+}
+
export default {
components: {SideBar},
+ computed: {active},
data() {
return {
- loading: true, user: user
+ loading: true, user: user, hash: ''
}
+ },
+ created() {
+ window.onhashchange = () => this.hash = window.location.hash
}
}
</script>
diff --git a/components/sidebar.vue b/components/sidebar.vue
index 1cbbb74..84ff09f 100644
--- a/components/sidebar.vue
+++ b/components/sidebar.vue
@@ -3,7 +3,7 @@
<img
src="/assets/image/mintberry.jpg">
-<li>
+<a href="" :class="active == 1 ? 'active' : ''">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"> <path
fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0
@@ -13,9 +13,9 @@ fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0
1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>
<span>Home</span>
-</li>
+</a>
-<li>
+<a href="#new" :class="active == 2 ? 'active' : ''">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-journal-plus" viewBox="0 0 16 16"> <path
fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5
@@ -26,9 +26,9 @@ fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5
1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0
0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/> </svg>
<span>New</span>
-</li>
+</a>
-<li>
+<a href="#estimates" :class="active == 3 ? 'active' : ''">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-journals" viewBox="0 0 16 16"> <path d="M5
0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1
@@ -38,9 +38,9 @@ d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5
0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 2.5v.5H.5a.5.5 0 0 0 0
1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0z"/> </svg>
<span>Estimates</span>
-</li>
+</a>
-<li>
+<a href="#settings" :class="active == 4 ? 'active' : ''">
<svg width="15px" height="15px" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd"
clip-rule="evenodd" d="M5.944 0.5L5.858 0.936707L5.52901 2.53467C5.00301 2.73554
@@ -62,21 +62,21 @@ d="M9.49963 7.49542C9.49963 8.5987 8.60363 9.49414 7.49963 9.49414C6.39563
5.49677C8.60363 5.49677 9.49963 6.39214 9.49963 7.49542Z" stroke="currentColor"
stroke-linecap="square" stroke-linejoin="round"/> </svg>
<span>Settings</span>
-</li>
+</a>
-<li>
+<a href="#sign-out" :class="active == 5 ? 'active' : ''">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-closed" viewBox="0 0 16 16">
<path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
</svg>
<span>Sign out</span>
-</li>
+</a>
</menu>
</template>
<script>
export default {
- props: ['role'],
+ props: ['role', 'active'],
}
</script>
diff --git a/main.js b/main.js
index 24adc3c..0d78849 100644
--- a/main.js
+++ b/main.js
@@ -2,4 +2,4 @@ import {createApp} from "vue"
import App from "./components/app.vue"
import "./assets/main.css"
-createApp(App).mount("#app")
+const app = createApp(App).mount("#app")
diff --git a/webpack.config.js b/webpack.config.js
index f25ebd0..875577b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -22,6 +22,7 @@ module.exports = {
}
}
},
+ devtool: 'inline-source-map',
// Required for also applying rules to sections of SFC
plugins: [new VueLoaderPlugin()],
};