From 7bc49d4d4fb7d103679459fddfbf9ad297dd986d Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Sat, 22 May 2021 10:15:18 -0400
Subject: [PATCH] Finish logout section

---
 resources/js/panel/panel.vue | 11 +++++++++--
 resources/scss/_vars.scss    | 13 +++++++++++++
 resources/scss/main.scss     | 15 +++++++++++++++
 routes/web.php               |  2 ++
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/resources/js/panel/panel.vue b/resources/js/panel/panel.vue
index 0f3176e..36e9c07 100644
--- a/resources/js/panel/panel.vue
+++ b/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,
diff --git a/resources/scss/_vars.scss b/resources/scss/_vars.scss
index fe504d5..cf08ff7 100644
--- a/resources/scss/_vars.scss
+++ b/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;
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index 919488f..8f1040e 100644
--- a/resources/scss/main.scss
+++ b/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);
+	}
+}
diff --git a/routes/web.php b/routes/web.php
index 8395ad6..99bf643 100644
--- a/routes/web.php
+++ b/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');