Add sidebar menu

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>

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>

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")

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()],
 };