Finish logout section

resources/js/panel/panel.vue

@@ -63,8 +63,11 @@
 	<img class="nav-btn" src="../../images/arrow-right-circle-fill.svg" alt="">
 	</section>
 </div>
-<div d="main" v-else-if="active === '#exit'">
-	<div class="actions"><a class="new-order" href="#orders/new">New</a></div>
+<div id="main" v-else-if="active === '#exit'">
+	<section class="logout-pane">
+		<h3>Are you sure you want to logout?</h3>
+		<a href="/logout">Logout</a>
+	</section>
 </div>
 </transition>
 </template>
@@ -80,6 +83,10 @@ function toggleOrderItem(event) {
 	event.target.parentNode.parentNode.classList.toggle('selected')
 }
 
+function logout(event) {
+	event.target.parentNode.parentNode.classList.toggle('selected')
+}
+
 export default {
 	components: {
 		Sidebar,

resources/scss/_vars.scss

@@ -91,6 +91,19 @@ $theme-colors: (
 	}
 }
 
+@mixin inverting-button($primary, $background) {
+	text-align: center;
+	border: 2px solid $primary;
+	border-radius: 4px;
+	padding: 10px;
+	background-color: $background;
+	color: $primary;
+	&:hover {
+		background-color: $primary;
+		color: $background;
+	}
+}
+
 // A button with a white background and specified accent color that reverses on hover
 @mixin brand-button($col) {
 	width: 10em;

resources/scss/main.scss

@@ -867,3 +867,18 @@ main.panel {
 		background-color: vars.getColor('light-blue');
 	}
 }
+
+.logout-pane {
+	margin-top: 25%;
+	text-align: center;
+	height: 10em;
+	a {
+		display: block;
+		// vertical-align: center;
+		margin: auto;
+		margin-top: 2em;
+		height: 1.3em;
+		width: 5em;
+		@include vars.inverting-button(black, white);
+	}
+}

routes/web.php

@@ -62,3 +62,5 @@ Route::get('/panel/user', function (Request $request) {
 Route::get('/panel/orders', [UserController::class,
 	'getOrders'])->middleware('auth');
 
+Route::get('/logout', [UserController::class,
+	'logout'])->middleware('auth');