reorganized the header elements to allow for easier styling. Added new reactivity

17th Website/src/components/ProfilePage/profile.vue

@@ -1,25 +1,27 @@
 <script>
 import profileHeader from './profileHeader.vue'
+import profileSubNav from './profileSubNav.vue';
 
 export default {
     name: 'ProfilePage',
     components: {
-        profileHeader
+        profileHeader,
+        profileSubNav
     }
 }
 
 </script>
 
 <template>
-    <div id="ProfileWrapper">
-        <div>
+    <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 ">
             <profileHeader></profileHeader>
-            <div id="profileSubnavWrapper">
-                
+            <div id="profileSubnavWrapper" class="mt-8 flex flex-row xl:flex-col">
+                <profileSubNav link="home" content="Home"></profileSubNav>
+                <profileSubNav link="activityHistory" content="History"></profileSubNav>
+                <profileSubNav link="shadowbox" content="Shadowbox"></profileSubNav>
             </div>
         </div>
-
-        test words
         <div id="profileContentWrapper">
             <RouterView />
         </div>
@@ -32,8 +34,16 @@ export default {
     margin-top: 100px;
 }
 
-#ProfileWrapper {
+/* #ProfileWrapper {
     display: flex;
     flex-direction: row;
-}
+} */
+
+/* @media screen and (max-width: 1300px) {
+    #wrapper {
+        flex-direction: row;
+        border: none;
+        margin-left: 25vw;
+    }
+} */
 </style>