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 @@
-
+
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 @@
-
-important info here
+
+
+important info here
+order info here
+
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 @@
+
+
+
+
+
+
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;
}