Position and color panel sidebar

resources/images/admin.svg

@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key" viewBox="0 0 16 16">
-  <path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
-  <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" 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>

resources/images/box-seam.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-seam" viewBox="0 0 16 16">
+  <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
+</svg>

resources/images/cart3.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart3" viewBox="0 0 16 16">
   <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
-</svg>
+</svg>

resources/images/home.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" 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>

resources/images/orders.svg

@@ -1 +1 @@
-<svg 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="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>

resources/images/settings.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" 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>
+</svg>

resources/images/summary.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-heading" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-card-heading" viewBox="0 0 16 16">
   <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
   <path d="M3 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0-5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-1z"/>
-</svg>
+</svg>

resources/js/main.js

@@ -1,5 +1,5 @@
 import RegisterArea from './register-area/register-area.vue'
-import Sidebar from './sidebar/sidebar.vue'
+import Panel from './panel/panel.vue'
 import '../scss/main.scss'
 import { createApp } from 'vue'
 importAll(require.context('../images', false, /\.(png|jpe?g|svg)$/))
@@ -20,7 +20,7 @@ function getCookie(name) {
   return (value != null) ? unescape(value[1]) : null
 }
 
-function getToken() {
+function getToken(app) {
 	fetch("/sanctum/csrf-cookie", {
 		method: 'GET'
 	}).then( () => {
@@ -76,15 +76,13 @@ function toggleNav() {
 	this.classList.toggle("toggled")
 }
 
-if (!token) {getToken()}
 
 if (window.location.pathname == '/') {
 	document.getElementById('nav_toggle').addEventListener('click', toggleNav)
 	document.querySelector('#login_form button').addEventListener('click', login)
 	const app = createApp(RegisterArea).mount('#app')
-	app.token = token
-	// console.log(app.token)
-	// console.log(app.$data.active)
+	// app.token = token
+	if (!token) {getToken(app)}
 
 	//Triggers for registration menu
 	for (let i = 0; i < registerToggles.length; i++) {
@@ -110,7 +108,7 @@ if (window.location.pathname == '/') {
 } else if (window.location.pathname == '/verify-email') {
 	document.getElementById('resend_verification').addEventListener("click", resendLink)
 } else if (window.location.pathname == '/panel') {
-	const app = createApp(Sidebar).mount('#panel')
-	app.token = token
+	const app = createApp(Panel).mount('#panel')
+	if (!token) {getToken(app)}
 }
 

resources/js/panel/panel.vue

@@ -0,0 +1,25 @@
+<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>
+</template>
+
+<script>
+/* import Summary from './summary.vue' */
+
+export default {
+	components: {
+		/* Summary, */
+	},
+	data() {
+	return {active: 'summary', }
+	},
+	methods: {
+
+	}
+}
+</script>

resources/js/panel/summary.vue

@@ -0,0 +1,3 @@
+<template>
+<div id="main">important info here</div>
+</template>

resources/js/sidebar/sidebar.vue

@@ -1,8 +0,0 @@
-<template>
-	<nav id="sidebar">
-	<a href="/panel"><img src="" alt=""></a>
-	<a href="/panel/orders">Orders<div><img src="" alt=""></div></a>
-	<a href="/panel/billing">Billing<div><img src="" alt=""></div></a>
-	<a href="/panel/admin">Administrator<div><img src="" alt=""></div></a>
-	</nav>
-</template>

resources/scss/main.scss

@@ -669,21 +669,52 @@ div.register-area.active {
 }
 
 main.panel {
-	min-height: 85vh;
-	max-height: 100vh;
+	min-height: 750px;
+	height: 90vh;
+	// max-height: 100vh;
 	background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
 }
 
+#panel {
+	top: 50px;
+	padding: 10px;
+	margin: auto;
+	position: relative;
+	max-width: 450px;
+	height: 600px;
+	display: flex;
+	gap: 10px;
+}
+
 #sidebar {
-	width: 40px;
+	position: relative;
+	width: 35px;
+	height: 50%;
 	color: white;
 	background: transparent;
+	display: block;
+	flex-shrink: 0;
 
 	a {
 		display: block;
+		margin: 20px 0;
 	}
 
 	img {
-		width: 50px
+		width: 35px;
+		color: white;
 	}
 }
+
+#panel #main {
+	height: 100%;
+	background: white;
+	width: 100%;
+	// min-width: 300px;
+	flex-shrink: 1;
+	// width: 100%;
+	// max-width: 300px;
+	margin-left: auto;
+	position: relative;
+	@include vars.hovering3;
+}