From 1a5b888892fb4b11fbf4fe0d47e0501c57b26c3e Mon Sep 17 00:00:00 2001
From: ajdj100 <AJCampbell@conestogac.on.ca>
Date: Tue, 10 Oct 2023 03:08:03 -0400
Subject: [PATCH] Finished work on the profile page header reactivity

---
 .../src/components/ProfilePage/profile.vue        | 15 ++++-----------
 .../src/components/ProfilePage/profileHeader.vue  |  6 +++---
 .../src/components/ProfilePage/profileSubNav.vue  | 10 +++++++---
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/17th Website/src/components/ProfilePage/profile.vue b/17th Website/src/components/ProfilePage/profile.vue
index 69a299c..616b8ac 100644
--- a/17th Website/src/components/ProfilePage/profile.vue	
+++ b/17th Website/src/components/ProfilePage/profile.vue	
@@ -13,8 +13,9 @@ export default {
 </script>
 
 <template>
-    <div id="ProfileWrapper" class="flex flex-col xl:flex-row">
-        <div id="HeaderWrapper" class="bg-opacity-20 xl:h-screen xl:pt-32 xl:pr-10 xl:border-r-2 xl:border-gray-dark">
+    <div id="ProfileWrapper" class="flex flex-col xl:flex-row items-center">
+        <div id="HeaderWrapper" class="flex flex-col items-center bg-opacity-20 xl:h-screen pt-8 xl:pt-32 
+            xl:pr-10 sm:border-b-2 xl:border-b-0 xl:border-r-2 border-gray-dark sm:w-full xl:w-96">
             <profileHeader></profileHeader>
             <div id="profileSubnavWrapper" class="mt-8 flex flex-row xl:flex-col">
                 <profileSubNav link="home" content="Home"></profileSubNav>
@@ -26,12 +27,4 @@ export default {
             <RouterView />
         </div>
     </div>
-</template>
-
-<style scoped>
-#profileContentWrapper {
-    margin-left: 300px;
-    margin-top: 100px;
-}
-
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/17th Website/src/components/ProfilePage/profileHeader.vue b/17th Website/src/components/ProfilePage/profileHeader.vue
index b9548d0..770764a 100644
--- a/17th Website/src/components/ProfilePage/profileHeader.vue	
+++ b/17th Website/src/components/ProfilePage/profileHeader.vue	
@@ -11,10 +11,10 @@ export default {
 </script>
 
 <template>
-    <div id="wrapper" class="flex flex-row xl:flex-col items-center">
+    <div id="wrapper" class="flex flex-row xl:flex-col xl:max-w-fit">
         <div id="headerImages" class="flex flex-col items-center">
-            <img id="rankImg" src="../icons/misc/test.png" class="w-52" />
-            <img id="rangerTab" src="../icons/misc/test.png" class="w-32" />
+            <img id="rankImg" src="../icons/misc/test.png" class="xl:w-52 w-40" />
+            <img id="rangerTab" src="../icons/misc/test.png" class="xl:w-32 w-28" />
         </div>
         <div id="mainInfo">
             <h1>Big Name</h1>
diff --git a/17th Website/src/components/ProfilePage/profileSubNav.vue b/17th Website/src/components/ProfilePage/profileSubNav.vue
index e64b98c..f747f15 100644
--- a/17th Website/src/components/ProfilePage/profileSubNav.vue	
+++ b/17th Website/src/components/ProfilePage/profileSubNav.vue	
@@ -17,8 +17,12 @@ export default {
 
 <template>
     <RouterLink :to="link">
-        <p class="text-white rounded-md my-0 p-2 hover:text-blue transition-all active:ring-1 active:ring-blue"
-            :class="{ active: active }">{{ content }}</p>
-        <Icon :icon="iconName"/>
+        <p class="text-white xl:rounded-md my-0 p-2 hover:text-blue transition-all 
+        xl:active:ring-1 sm:border-b-2 xl:border-b-0 sm:border-gray-light sm:active:border-blue 
+        xl:active:ring-blue xl:w-64 sm:w-36 sm:text-center xl:text-left" 
+        :class="{ active: active }">
+            {{ content }}
+        </p>
+        <Icon :icon="iconName" />
     </RouterLink>
 </template>
\ No newline at end of file