pixelfed/resources/assets/components/Groups.vue

<template>
    <div class="group-component">
        <div v-if="tab === 'home'">
            <groups-home />
        </div>

        <div v-if="tab === 'createGroup'">
            <!-- <div class="col-12 group-component-hero">
                <h3 class="font-weight-bold">Create Group</h3>
                <button class="btn btn-outline-primary px-3 rounded-pill font-weight-bold" @click="switchTab('home')">Back to Groups</button>
            </div> -->

            <create-group />
        </div>

        <div v-if="tab === 'show'">
            <group-feed :group-id="groupId" :path="path" />
        </div>
    </div>
</template>

<script type="text/javascript">
    import GroupsHome from '@/groups/GroupsHome.vue';
    import GroupFeed from '@/groups/GroupFeed.vue';
    import CreateGroup from '@/groups/CreateGroup.vue';

    export default {
        props: {
            groupId: {
                type: String
            },

            path: {
                type: String
            }
        },

        data() {
            return {
                tab: 'home'
            }
        },

        components: {
            "groups-home": GroupsHome,
            "create-group": CreateGroup,
            "group-feed": GroupFeed,
        },

        mounted() {
            if(this.groupId) {
                this.tab = 'show';
            }
        },

        methods: {
            switchTab(newTab) {
                this.tab = newTab;
            }
        }
    }
</script>

<style lang="scss">
    .group-component {
        &-hero {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border: 1px solid #dee2e6;
            border-top: 0;
            background-color: #fff;

            h3 {
                margin-bottom: 0;
            }
        }
    }
</style>