From 8494435696796870d708e02f061efba3287bbd2d Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Wed, 1 Jan 2025 21:31:38 -0500
Subject: [PATCH] Move log out button to side bar bottom, fix missing import

---
 src/components/BaseButton.vue           |  5 +++++
 src/components/Menus/AsideMenuLayer.vue | 21 +++++++++++----------
 src/views/Game/PlayerView.vue           |  7 ++++++-
 src/views/Profile/CardsView.vue         |  1 +
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index ba99612..bacc15a 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -55,6 +55,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  thin: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const is = computed(() => {
@@ -99,6 +103,7 @@ const componentClass = computed(() => {
     "hover:scale-[1.02] hover:shadow-xl",
     props.disabled ? "cursor-not-allowed" : "cursor-pointer",
     props.roundedFull ? "rounded-lg" : "rounded",
+    props.thin ? "scale-y-0" : "scale-y-[90%]",
     getButtonColor(props.color, props.outline, !props.disabled, props.active),
   ];
 
diff --git a/src/components/Menus/AsideMenuLayer.vue b/src/components/Menus/AsideMenuLayer.vue
index cc37e50..c43a989 100644
--- a/src/components/Menus/AsideMenuLayer.vue
+++ b/src/components/Menus/AsideMenuLayer.vue
@@ -4,7 +4,6 @@ import { computed } from "vue";
 import { useStyleStore } from "@/stores/style.js";
 import AsideMenuList from "@/components/Menus/AsideMenuList.vue";
 import AsideMenuItem from "@/components/Menus/AsideMenuItem.vue";
-import BaseButton from "@/components/BaseButton.vue";
 
 defineProps({
   menu: {
@@ -24,6 +23,12 @@ const logoutItem = computed(() => ({
   isLogout: true,
 }));
 
+const closeItem = computed(() => ({
+  label: "Close",
+  icon: mdiClose,
+  color: "danger",
+}));
+
 const menuClick = (event, item) => {
   emit("menu-click", event, item);
 };
@@ -49,15 +54,6 @@ const asideLgCloseClick = (event) => {
             <samp class="tracking-tighter">PhaseII</samp> eAmusement Network
           </h2>
         </div>
-        <div class="hidden lg:block xl:hidden w-full">
-          <BaseButton
-            :icon="mdiClose"
-            label="Close"
-            color="danger"
-            class="w-full mx-2"
-            @click.prevent="asideLgCloseClick"
-          />
-        </div>
       </div>
       <div
         :class="
@@ -71,6 +67,11 @@ const asideLgCloseClick = (event) => {
       </div>
 
       <ul class="invisible lg:visible">
+        <AsideMenuItem
+          class="hidden lg:block xl:hidden w-full"
+          :item="closeItem"
+          @menu-click="asideLgCloseClick"
+        />
         <AsideMenuItem :item="logoutItem" @menu-click="menuClick" />
       </ul>
     </div>
diff --git a/src/views/Game/PlayerView.vue b/src/views/Game/PlayerView.vue
index 6464810..fedf3f1 100644
--- a/src/views/Game/PlayerView.vue
+++ b/src/views/Game/PlayerView.vue
@@ -33,6 +33,7 @@ const $router = useRouter();
 var gameID = null;
 var thisGame = null;
 var profileUserId = null;
+var firstLoad = true;
 
 gameID = $route.params.game;
 profileUserId = $route.params.userId;
@@ -54,7 +55,11 @@ const versionForm = reactive({
 watch(
   () => versionForm.currentVersion,
   () => {
-    loadProfile();
+    if (firstLoad) {
+      firstLoad = false;
+    } else {
+      loadProfile();
+    }
   }
 );
 
diff --git a/src/views/Profile/CardsView.vue b/src/views/Profile/CardsView.vue
index 56ed77f..306ed3e 100644
--- a/src/views/Profile/CardsView.vue
+++ b/src/views/Profile/CardsView.vue
@@ -8,6 +8,7 @@ import {
 import { dashCode } from "@/constants/userData.js";
 import SectionMain from "@/components/SectionMain.vue";
 import BaseButton from "@/components/BaseButton.vue";
+import BaseIcon from "@/components/BaseIcon.vue";
 import UserCard from "@/components/UserCard.vue";
 import CardBox from "@/components/CardBox.vue";
 import FormField from "@/components/FormField.vue";