Move log out button to side bar bottom, fix missing import

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),
   ];
 

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>

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();
+    }
   }
 );
 

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";