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

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

<template>
    <div class="header-container">
        <div class="header-container__left-area">
            <div class="header-container__left-area__logo">
                <svg class="header-container__left-area__logo__img" width="54" height="60" viewBox="0 0 54 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M54 17.4399C53.9172 19.3141 53.0892 20.6993 51.5161 21.6771C51.1849 21.8401 51.1021 22.003 51.1021 22.329C51.1021 27.4625 51.1021 32.596 51.1021 37.7295C51.1021 38.0555 51.1849 38.2184 51.4333 38.3814C53.2548 39.4407 54.2484 41.3963 53.9172 43.4334C53.586 45.389 52.0129 47.0187 49.9429 47.3447C48.7837 47.5891 47.6246 47.4262 46.5482 46.7743C46.217 46.6113 45.9686 46.6113 45.7202 46.7743C41.2491 49.3003 36.7781 51.9078 32.307 54.4338C31.9758 54.5968 31.893 54.7597 31.893 55.1672C31.893 57.6117 29.9887 59.8118 27.5875 59.9747C25.0208 60.2192 22.7025 58.671 22.2057 56.145C22.1229 55.7376 22.1229 55.4116 22.1229 55.0042C22.1229 54.7597 22.0401 54.5968 21.7917 54.4338C17.2378 51.8263 12.6839 49.3003 8.13005 46.6928C7.88166 46.5298 7.71606 46.5298 7.46767 46.6928C4.48695 48.4854 0.678253 46.7743 0.0986687 43.5149C-0.31532 41.4778 0.595455 39.5222 2.41701 38.3814C2.7482 38.2184 2.83099 38.0555 2.83099 37.648C2.83099 32.5145 2.83099 27.381 2.83099 22.2475C2.83099 21.9216 2.7482 21.7586 2.4998 21.5956C0.595455 20.5363 -0.31532 18.6622 0.0986687 16.5436C0.42986 14.425 2.08581 12.8768 4.23856 12.6323C5.39772 12.4694 6.4741 12.7138 7.46767 13.2842C7.71606 13.4472 7.88166 13.4472 8.13005 13.2842C12.6839 10.6767 17.155 8.15071 21.7089 5.54321C21.9573 5.38024 22.1229 5.21727 22.1229 4.89133C22.1229 2.03938 24.3584 -0.0792115 27.2563 0.00227286C29.4919 0.0837572 31.5618 1.87641 31.893 4.07649C31.893 4.23946 31.9758 4.40243 31.9758 4.64688C31.9758 5.21727 32.2242 5.54321 32.6382 5.78766C37.0265 8.23219 41.4147 10.7582 45.803 13.2842C46.1342 13.4472 46.2998 13.4472 46.631 13.2842C49.6117 11.573 53.2548 13.2027 53.9172 16.5436C54 16.8695 54 17.1955 54 17.4399ZM15.1679 35.0405C15.0851 35.0405 15.0851 35.122 15.0851 35.122C12.6011 36.5073 10.1172 37.8925 7.63326 39.3592C7.46767 39.4407 7.21927 39.4407 7.05368 39.3592C6.3913 38.9518 5.72892 38.7073 4.90094 38.7073C2.33421 38.6258 0.843848 40.663 0.761051 42.4556C0.761051 44.4927 2.33421 46.6113 4.90094 46.6113C7.13648 46.6113 8.87523 44.8187 8.87523 42.6186C8.87523 42.2112 8.95803 41.9667 9.37202 41.8037C12.0215 40.337 14.5883 38.8703 17.2378 37.3221C17.4862 37.1591 17.7346 37.1591 17.983 37.2406C19.6389 37.974 21.2949 38.1369 23.0336 37.648C23.1992 37.5665 23.4476 37.648 23.6132 37.7295C24.11 37.974 24.6068 38.2184 25.1036 38.3814C25.4348 38.4629 25.5176 38.6258 25.5176 38.9518C25.5176 43.026 25.5176 47.0187 25.5176 51.0929C25.5176 51.3374 25.4348 51.5004 25.1864 51.6633C23.7788 52.3152 22.7852 54.0264 23.0336 55.819C23.3648 57.9376 25.5176 59.4858 27.6703 59.0784C29.5747 58.7525 30.7338 57.4487 31.065 55.5746C31.2306 54.2708 30.5682 52.5597 28.9123 51.6633C28.6639 51.5819 28.5811 51.4189 28.5811 51.1744C28.5811 47.2632 28.5811 43.3519 28.5811 39.4407C28.5811 39.1147 28.7467 39.0333 29.0779 38.9518C29.9059 38.7888 30.7338 38.6258 31.479 38.4629C31.8102 38.3814 32.1414 38.3814 32.4726 38.4629C34.2113 39.1962 35.9501 39.1147 37.606 38.1369C37.8544 37.974 38.02 37.974 38.2684 38.1369C40.4212 39.3592 42.5739 40.5815 44.7267 41.8037C45.0578 41.9667 45.2234 42.2112 45.2234 42.6186C44.975 44.9001 47.1278 46.7743 49.5289 46.5298C51.9301 46.2854 53.586 44.0038 53.0064 41.7222C52.344 38.9518 49.3633 37.7295 46.8794 39.1962C46.631 39.3592 46.4654 39.3592 46.1342 39.1962C44.0643 37.974 41.9943 36.8332 39.9244 35.6924C39.5932 35.5294 39.5932 35.3665 39.676 35.0405C40.3384 33.0034 39.8416 31.1293 38.3512 29.5811C38.02 29.2551 36.6953 27.1366 36.4469 26.7291C36.2813 26.4032 36.3641 26.2402 36.6953 26.0773C39.8416 24.2846 42.9879 22.5734 46.0514 20.7808C46.2998 20.6178 46.4654 20.6178 46.7138 20.7808C47.6246 21.3512 48.6181 21.5141 49.6117 21.3512C51.5989 21.0252 53.0892 19.2326 52.9236 17.114C52.758 14.8324 50.4397 13.1212 48.1214 13.6102C46.1342 14.0176 44.8094 15.5658 44.8922 17.6029C44.8922 17.9288 44.8094 18.1733 44.4783 18.3362C41.3319 20.1289 38.1028 21.9216 34.9565 23.7142C34.7081 23.8772 34.5425 23.8772 34.2941 23.6327C32.8038 22.2475 30.9822 21.4326 28.9951 21.1882C28.3327 21.1067 28.3327 21.1067 28.3327 20.3734C28.3327 16.7066 28.3327 13.0398 28.3327 9.37297C28.3327 
                    <path d="M22.4933 25.5491C23.1511 25.6323 23.3978 25.3828 23.8912 24.9671C25.8648 23.0547 28.2495 22.5558 30.7987 23.3873C33.3479 24.2188 34.9103 26.048 35.4037 28.7088C35.4859 29.2077 35.7326 29.5403 36.1438 29.7898C37.4595 30.5381 38.1996 32.2011 37.9529 33.5315C37.624 35.2776 36.4727 36.5249 34.8281 36.7743C33.9235 36.9406 33.1012 36.7743 32.3611 36.3586C32.0322 36.1091 31.7855 36.1923 31.3743 36.3586C29.0718 37.3564 26.9338 37.1901 24.7958 35.8597C24.4668 35.6934 24.2201 35.6102 23.8912 35.7765C20.9308 36.7743 17.8882 35.0282 17.1482 32.1179C16.3258 28.7088 19.0395 25.3828 22.4933 25.5491Z" fill="#2683FF"/>
                    <path d="M48 43C48 42.4286 48.4286 42 49 42C49.5714 42 50 42.4286 50 43C50 43.5 49.5 44 49 44C48.4286 44 48 43.5714 48 43Z" fill="#2683FF"/>
                    <path d="M26 5C26 4.42857 26.4444 4 27.037 4C27.5556 4 28 4.42857 28 5C28 5.5 27.5556 6 26.963 6C26.4444 5.92857 26 5.5 26 5Z" fill="#2683FF"/>
                    <path d="M6 43C6 43.5714 5.57143 44 5 44C4.5 44 4 43.5 4 43C4 42.5 4.5 42 5 42C5.57143 42 6 42.4286 6 43Z" fill="#2683FF"/>
                    <path d="M27 54C27.5714 54 28 54.6667 28 55.5556C28 56.4444 27.5714 57 27 57C26.4286 57 26 56.3333 26 55.4444C26 54.6667 26.4286 54 27 54Z" fill="#2683FF"/>
                    <path d="M5 19C4.42857 19 4 18.3333 4 17.5556C4 16.7778 4.42857 16 5 16C5.57143 16 6 16.5556 6 17.4444C5.92857 18.3333 5.57143 19 5 19Z" fill="#2683FF"/>
                    <path d="M48.9327 19C48.3635 19 47.9366 18.3333 48.0078 17.4444C48.0078 16.5556 48.4347 16 49.0039 16C49.5731 16 50 16.6667 50 17.5556C49.9288 18.3333 49.4308 19 48.9327 19Z" fill="#2683FF"/>
                </svg>
                <svg class="header-container__left-area__logo__text" width="69" height="16" viewBox="0 0 69 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.5974 3.50249C4.28571 3.7413 4.12986 4.1393 4.12986 4.61692C4.12986 5.09453 4.36363 5.41293 4.75324 5.65174C5.14285 5.89055 6.07792 6.20896 7.48052 6.60697C8.88311 7.00498 10.0519 7.48259 10.8312 8.19901C11.6104 8.91542 12 9.95025 12 11.3831C12 12.7363 11.4545 13.8507 10.4416 14.7264C9.42857 15.602 8.10389 16 6.46753 16C4.05194 16 1.94805 15.1244 0 13.2935L2.02597 10.7463C3.66233 12.1791 5.14285 12.8955 6.54545 12.8955C7.16883 12.8955 7.63636 12.7363 8.02597 12.4975C8.41558 12.2587 8.57143 11.8607 8.57143 11.3831C8.57143 10.9055 8.41558 10.5871 8.02597 10.2687C7.63636 10.0299 6.93506 9.71144 5.76623 9.47264C3.97402 9.07463 2.72727 8.51741 1.94805 7.801C1.16883 7.08458 0.701294 6.04975 0.701294 4.61692C0.701294 3.18408 1.24675 1.99005 2.25974 1.19403C3.27272 0.39801 4.59739 0 6.07792 0C7.0909 0 8.1039 0.159205 9.11688 0.557215C10.1299 0.875623 10.987 1.43283 11.7662 2.06965L10.0519 4.61692C8.72727 3.58209 7.4026 3.10448 6 3.10448C5.37662 3.10448 4.90909 3.26368 4.5974 3.50249Z" fill="#2683FF"/>
                    <path d="M21.3268 3.13402V16H17.6732V3.13402H13V0H26V3.13402H21.3268Z" fill="#2683FF"/>
                    <path d="M40.5594 13.68C38.8762 15.2 36.8564 16 34.5 16C32.1436 16 30.0396 15.2 28.4406 13.68C26.7574 12.16 26 10.24 26 8C26 5.76 26.8416 3.84 28.4406 2.32C30.1238 0.800001 32.1436 0 34.5 0C36.9406 0 38.9604 0.800001 40.5594 2.32C42.2426 3.84 43 5.76 43 8C43 10.24 42.2426 12.16 40.5594 13.68ZM39.297 8C39.297 6.64 38.7921 5.44 37.8663 4.48C36.9406 3.52 35.7624 3.04 34.4158 3.04C33.0693 3.04 31.8911 3.52 30.9653 4.48C30.0396 5.44 29.5347 6.64 29.5347 8C29.5347 9.36 30.0396 10.56 30.9653 11.52C31.8911 12.48 33.0693 12.96 34.4158 12.96C35.7624 12.96 36.9406 12.48 37.8663 11.52C38.8762 10.56 39.297 9.36 39.297 8Z" fill="#2683FF"/>
                    <path d="M58.0059 5.36082C58.0059 7.91752 57.0118 9.56701 54.9408 10.3093L59 16H54.6095L51.0473 10.8866H48.5621V16H45V0H51.0473C53.5325 0 55.355 0.412371 56.3491 1.23711C57.5089 2.14433 58.0059 3.46392 58.0059 5.36082ZM53.6982 7.25773C54.1124 6.84536 54.3609 6.26804 54.3609 5.36082C54.3609 4.45361 54.1124 3.87629 53.6982 3.62887C53.2012 3.29897 52.4556 3.13402 51.2959 3.13402H48.645V7.83505H51.2959C52.4556 7.83505 53.284 7.58763 53.6982 7.25773Z" fill="#2683FF"/>
                    <path d="M60.92 3.11795V0H69V10.3385C69 12.2256 68.52 13.6205 67.56 14.6051C66.6 15.5077 65.4 16 63.88 16C62.04 16 60.36 15.2615 59 13.7846L60.76 11.241C61.72 12.3077 62.68 12.8 63.72 12.8C64.2 12.8 64.6 12.6359 65 12.2256C65.32 11.8154 65.56 11.241 65.56 10.5026V3.0359L60.92 3.11795Z" fill="#2683FF"/>
                </svg>
            </div>
            <ProjectSelectionArea class="header-container__left-area__project-selection"/>
        </div>
        <div class="header-container__right-area">
            <AccountButton class="header-container__right-area__account-button" />
            <NewProjectArea class="header-container__right-area__new-project" />
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ProjectSelectionArea from '@/components/header/projectSelection/ProjectSelectionArea.vue';
import NewProjectArea from '@/components/header/NewProjectArea.vue';
import AccountButton from './AccountButton.vue';

@Component(
    {
        components: {
            ProjectSelectionArea,
            NewProjectArea,
            AccountButton,
        },
    }
)

export default class DashboardHeader extends Vue {
}
</script>

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

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

            &__logo {
                display: flex;
                flex-direction: row;
                align-items: center;
                position: absolute;
                left: 60px;
                top: 16px;
                cursor: pointer;

                &__img {
                    width: 54px;
                    height: 60px;
                }

                &__text {
                    margin-left: 12px;
                    width: 69px;
                    height: 16px;
                }
            }

            &__project-selection {
                margin-left: 265px;
            }
        }

        &__right-area {
            @extend .header-container__left-area;
            justify-content: flex-end;

            &__account-button {
                margin-right: 3vw;
            }

            &__new-project {
                margin-right: 60px;
            }
        }
    }

    @media screen and (max-width: 1024px) {
        .header-container {

            &__left-area {

                &__logo {
                    left: 20px;
                }

                &__logo__text {
                   display: none;
                }

                &__project-selection {
                    margin-left: 60px;
                }
            }
        }
    }
</style>