Add transitioning between panel sections

resources/images/orders.svg

@@ -1 +1 @@
-<svg fill="white" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m16.12 1.929-10.891 5.576-4.329-2.13 10.699-5.283c.24-.122.528-.122.78 0z"/><path d="m23.088 5.375-11.082 5.49-4.15-2.045-.6-.305 10.903-5.575.6.304z"/><path d="m11.118 12.447-.012 11.553-10.614-5.539c-.3-.158-.492-.475-.492-.816v-10.688l4.498 2.216v3.896c0 .499.408.913.9.913s.9-.414.9-.913v-2.995l.6.292z"/><path d="m23.988 6.969-11.07 5.466-.012 11.553 11.094-5.793z"/></svg>
+<svg fill="currentColor" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m16.12 1.929-10.891 5.576-4.329-2.13 10.699-5.283c.24-.122.528-.122.78 0z"/><path d="m23.088 5.375-11.082 5.49-4.15-2.045-.6-.305 10.903-5.575.6.304z"/><path d="m11.118 12.447-.012 11.553-10.614-5.539c-.3-.158-.492-.475-.492-.816v-10.688l4.498 2.216v3.896c0 .499.408.913.9.913s.9-.414.9-.913v-2.995l.6.292z"/><path d="m23.988 6.969-11.07 5.466-.012 11.553 11.094-5.793z"/></svg>

resources/js/main.js

@@ -46,7 +46,8 @@ function login(event) {
 				"Invalid credentials."
 		}
 	})
-	event.preventDefault();
+	event.stopPropogation()
+	return false
 }
 
 //Attempt to resend the verification link
@@ -65,7 +66,7 @@ function resendLink(event) {
 			`${response.status} : ${response.statusText}`
 		}
 	})
-	event.preventDefault();
+	event.stopPropogation();
 }
 
 function toggleNav() {
@@ -110,5 +111,6 @@ if (window.location.pathname == '/') {
 } else if (window.location.pathname == '/panel') {
 	const app = createApp(Panel).mount('#panel')
 	if (!token) {getToken(app)}
+	window.onhashchange = ()=>{app.active = location.hash }
 }
 

resources/js/panel/panel.vue

@@ -1,25 +1,20 @@
 <template>
-<nav id="sidebar">
-<a href="/panel#"><img src="../../images/home.svg" alt=""></a>
-<a href="/panel#orders"><img src="../../images/orders.svg" alt=""></a>
-<a href="/panel#settings"><img src="../../images/settings.svg" alt=""></a>
-<a href="/panel#admin"><img src="../../images/admin.svg" alt=""></a>
-</nav>
-<div v-if="active === 'summary'" id="main">important info here</div>
+<sidebar :active="active"></sidebar>
+<transition name="fade" mode="out-in">
+<div v-if="active === ''" id="main">important info here</div>
+<div v-else-if="active === '#orders'" id="main">order info here</div>
+</transition>
 </template>
 
 <script>
-/* import Summary from './summary.vue' */
+import Sidebar from './sidebar.vue'
 
 export default {
 	components: {
-		/* Summary, */
+		Sidebar,
 	},
 	data() {
-	return {active: 'summary', }
+	return {active: window.location.hash, }
 	},
-	methods: {
-
-	}
 }
 </script>

resources/js/panel/sidebar.vue

@@ -0,0 +1,29 @@
+<template>
+<nav id="sidebar">
+<a :class="{selected: active == ''}" href="/panel#">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-door-fill" viewBox="0 0 16 16">
+  <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
+</svg>
+</a>
+<a :class="{selected: active == '#orders'}" href="/panel#orders">
+<svg fill="currentColor" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m16.12 1.929-10.891 5.576-4.329-2.13 10.699-5.283c.24-.122.528-.122.78 0z"/><path d="m23.088 5.375-11.082 5.49-4.15-2.045-.6-.305 10.903-5.575.6.304z"/><path d="m11.118 12.447-.012 11.553-10.614-5.539c-.3-.158-.492-.475-.492-.816v-10.688l4.498 2.216v3.896c0 .499.408.913.9.913s.9-.414.9-.913v-2.995l.6.292z"/><path d="m23.988 6.969-11.07 5.466-.012 11.553 11.094-5.793z"/></svg>
+</a>
+<a :class="{selected: active == '#settings'}" href="/panel#settings">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
+  <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+</svg>
+</a>
+<a :class="{selected: active == '#admin'}" href="/panel#admin">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key-fill" viewBox="0 0 16 16">
+  <path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+</svg>
+</a>
+</nav>
+</template>
+
+<script>
+export default {
+	props: ['active']
+}
+</script>
+

resources/scss/_vars.scss

@@ -122,6 +122,7 @@ $theme-colors: (
 	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
 	transition: transform 0.2s;
 }
+
 @mixin hovering-light {
 	padding: 18px 9px;
 	border-radius: 4px;

resources/scss/main.scss

@@ -700,21 +700,32 @@ main.panel {
 		margin: 20px 0;
 	}
 
-	img {
+	svg {
 		width: 35px;
+		height: 35px;
 		color: white;
 	}
+	a.selected svg {
+		color: vars.getColor("brand-orange");
+	}
 }
 
 #panel #main {
 	height: 100%;
 	background: white;
 	width: 100%;
-	// min-width: 300px;
 	flex-shrink: 1;
-	// width: 100%;
-	// max-width: 300px;
 	margin-left: auto;
 	position: relative;
+	// opacity: 1;
 	@include vars.hovering3;
+	transition: opacity 0.5s ease;
+}
+
+// .fade-enter-active, .fade-leave-active {
+	// transition: opacity 1s ease;
+// }
+
+.fade-enter-from, .fade-leave-to {
+	opacity: 0;
 }