From 24f77c14eb1df6f997694d22ca206c2b3e825a9e Mon Sep 17 00:00:00 2001
From: Raajheer1 <raaj.patel229@gmail.com>
Date: Sat, 9 Mar 2024 01:16:48 -0600
Subject: [PATCH] implement route hash for quick tab navigation

---
 src/views/Profile.vue                | 21 ++++++++++++++++++++-
 src/views/partials/MobileSidebar.vue |  7 +++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 45d12ec..7869306 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -32,7 +32,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 
 // Components
 import Card from "@/components/Card.vue";
@@ -46,7 +47,25 @@ const tabs = ref<string[]>(["Profile", "Notifications", "Discord"]);
 const selectedTab = ref<number>(0);
 const changeTab = (tab: number): void => {
   selectedTab.value = tab;
+  window.location.hash = tabs.value[tab].toLowerCase();
 };
+
+const route = useRoute();
+
+const currentHashTab = computed(() => {
+  const hash = route.hash.slice(1); // Remove leading "#"
+
+  return tabs.value.findIndex((tab) => tab.toLowerCase() === hash) || 0;
+});
+
+watch(currentHashTab, (newTab) => {
+  selectedTab.value = newTab;
+});
+
+// Initial check on component mount
+onMounted(() => {
+  selectedTab.value = currentHashTab.value;
+});
 </script>
 
 <style scoped>
diff --git a/src/views/partials/MobileSidebar.vue b/src/views/partials/MobileSidebar.vue
index 9034b1f..c7a946b 100644
--- a/src/views/partials/MobileSidebar.vue
+++ b/src/views/partials/MobileSidebar.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="fixed top-[60px] left-0 w-screen h-screen z-50 transition-all">
-    <div class="bg-usa-blue w-[275px] p-4 text-sm">
+  <div class="fixed top-[60px] left-0 w-screen h-screen z-50 transition-all lg:invisible lg:opacity-0">
+    <div class="top-0 left-0 w-full h-full absolute bg-black bg-opacity-80 content-['']" @click="$emit('toggle')"></div>
+    <div class="relative bg-usa-blue w-[275px] max-w-[80%] p-4 text-sm rounded-br">
       <div v-for="(link, idx) in SidebarLinks" :key="idx">
         <div v-if="link.separator" class="mt-2 flex py-1 my-auto">
           <h2 v-if="link.separatorTitle !== undefined" class="mr-4 text-usa-white text-md font-bold">
@@ -13,6 +14,7 @@
           class="flex rounded p-3 hover:bg-white text-usa-white hover:bg-opacity-20 hover:text-usa-red items-center justify-between my-0.5"
           active-class="bg-white bg-opacity-10 font-bold text-usa-red"
           :to="link.to"
+          @click="$emit('toggle')"
         >
           <div class="flex items-center gap-x-4">
             <span class="w-4 mx-auto text-center">
@@ -28,6 +30,7 @@
           v-else
           class="flex rounded p-3 hover:bg-white text-usa-white hover:bg-opacity-20 hover:text-usa-red items-center justify-between my-0.5"
           active-class="bg-white bg-opacity-10 font-bold text-usa-red"
+          @click="$emit('toggle')"
         >
           <div class="flex items-center gap-x-4">
             <span class="w-4 mx-auto text-center">