<script>
import profileHeader from './profileHeader.vue'
import profileSubNav from './profileSubNav.vue';

export default {
    name: 'ProfilePage',
    components: {
        profileHeader,
        profileSubNav
    }
}

</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 ">
            <profileHeader></profileHeader>
            <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 id="profileContentWrapper">
            <RouterView />
        </div>
    </div>
</template>

<style scoped>
#profileContentWrapper {
    margin-left: 300px;
    margin-top: 100px;
}

/* #ProfileWrapper {
    display: flex;
    flex-direction: row;
} */

/* @media screen and (max-width: 1300px) {
    #wrapper {
        flex-direction: row;
        border: none;
        margin-left: 25vw;
    }
} */
</style>