storj/web/satellite/src/components/header/Header.vue

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.

<template>
    <div class="header-container">
        <div class="header-container__left-area">
            <ProjectSelectionArea class="header-container__left-area__project-selection"/>
        </div>
        <div class="header-container__right-area">
            <NewProjectArea class="header-container__right-area__new-project" />
            <AccountButton class="header-container__right-area__account-button" />
        </div>
        <ProjectCreationSuccessPopup/>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import NewProjectArea from '@/components/header/NewProjectArea.vue';
import ProjectSelectionArea from '@/components/header/projectSelection/ProjectSelectionArea.vue';
import ProjectCreationSuccessPopup from '@/components/project/ProjectCreationSuccessPopup.vue';

import AccountButton from './AccountButton.vue';

@Component({
    components: {
        ProjectCreationSuccessPopup,
        ProjectSelectionArea,
        NewProjectArea,
        AccountButton,
    },
})
export default class DashboardHeader extends Vue {}
</script>

<style scoped lang="scss">
    .header-container {
        width: 100%;
        height: 100px;
        min-height: 100px;
        background-color: white;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-left: 60px;
        padding-right: 60px;

        &__left-area {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
        }

        &__right-area {
            @extend .header-container__left-area;
            justify-content: flex-end;
            position: absolute;
            right: 60px;
            width: 30%;

            &__new-project {
                margin-right: 24px;
            }
        }
    }
</style>