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

This commit is contained in:
ajdj100
2023-10-10 01:09:19 -04:00
parent 128997c09a
commit 2151a1f9ae

View File

@@ -1,25 +1,27 @@
<script> <script>
import profileHeader from './profileHeader.vue' import profileHeader from './profileHeader.vue'
import profileSubNav from './profileSubNav.vue';
export default { export default {
name: 'ProfilePage', name: 'ProfilePage',
components: { components: {
profileHeader profileHeader,
profileSubNav
} }
} }
</script> </script>
<template> <template>
<div id="ProfileWrapper"> <div id="ProfileWrapper" class="flex flex-col xl:flex-row">
<div> <div id="HeaderWrapper" class="bg-opacity-20 xl:h-screen xl:pt-32 xl:pr-10 xl:border-r-2 ">
<profileHeader></profileHeader> <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>
</div> </div>
test words
<div id="profileContentWrapper"> <div id="profileContentWrapper">
<RouterView /> <RouterView />
</div> </div>
@@ -32,8 +34,16 @@ export default {
margin-top: 100px; margin-top: 100px;
} }
#ProfileWrapper { /* #ProfileWrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} } */
/* @media screen and (max-width: 1300px) {
#wrapper {
flex-direction: row;
border: none;
margin-left: 25vw;
}
} */
</style> </style>