From efc801a05be8d937341c22f58c83dc3149367f25 Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Mon, 17 May 2021 14:00:34 -0400
Subject: [PATCH] Add transitioning between panel sections
---
resources/images/orders.svg | 2 +-
resources/js/main.js | 6 ++++--
resources/js/panel/panel.vue | 21 ++++++++-------------
resources/js/panel/sidebar.vue | 29 +++++++++++++++++++++++++++++
resources/scss/_vars.scss | 1 +
resources/scss/main.scss | 19 +++++++++++++++----
6 files changed, 58 insertions(+), 20 deletions(-)
create mode 100644 resources/js/panel/sidebar.vue
diff --git a/resources/images/orders.svg b/resources/images/orders.svg
index 94b73e2..976051c 100644
--- a/resources/images/orders.svg
+++ b/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>
diff --git a/resources/js/main.js b/resources/js/main.js
index 18a16cd..ec67fa6 100644
--- a/resources/js/main.js
+++ b/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 }
}
diff --git a/resources/js/panel/panel.vue b/resources/js/panel/panel.vue
index 0173fe2..bb1f4a7 100644
--- a/resources/js/panel/panel.vue
+++ b/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>
diff --git a/resources/js/panel/sidebar.vue b/resources/js/panel/sidebar.vue
new file mode 100644
index 0000000..cef6589
--- /dev/null
+++ b/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>
+
diff --git a/resources/scss/_vars.scss b/resources/scss/_vars.scss
index 940c63a..ffca216 100644
--- a/resources/scss/_vars.scss
+++ b/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;
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index eb0f40b..eca98fd 100644
--- a/resources/scss/main.scss
+++ b/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;
}