storj/web/satellite/src/components/header/headerArea.html

42 lines
6.4 KiB
HTML
Raw Normal View History

<!--Copyright (C) 2019 Storj Labs, Inc.-->
<!--See LICENSE for copying information.-->
<div class="dashboard-header-container">
<div class="dashboard-header-container__left-area">
<svg
class="dashboard-header-container__left-area__menu-button"
v-if="!isNavigationVisible"
@click.stop="toggleNavigationVisibility"
width="21" height="15" viewBox="0 0 21 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
<rect y="6.31055" width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
<rect y="12.6206" width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
</svg>
<div class="dashboard-header-container__left-area__close-button" v-if="isNavigationVisible" @click.stop="toggleNavigationVisibility">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="20" fill="#F5F6FA"/>
<path d="M14.4015 13.2402C14.8097 13.6484 15.2211 14.0598 15.6292 14.468L18.5784 17.4171C19.7631 18.6018 20.9477 19.7864 22.1363 20.975L25.2198 24.0585C25.7199 24.5586 26.2302 25.0458 26.7175 25.5562C26.7239 25.5626 26.7303 25.5691 26.7374 25.5761C27.0434 25.8821 27.0633 26.4381 26.7374 26.7409C26.4083 27.0436 25.8979 27.0668 25.5727 26.7409C25.1645 26.3327 24.7531 25.9213 24.3449 25.5131L21.3957 22.564C20.2111 21.3793 19.0265 20.1947 17.8379 19.0061L14.7544 15.9226C14.2543 15.4225 13.7439 14.9353 13.2567 14.4249C13.2503 14.4185 13.2438 14.412 13.2368 14.405C12.9308 14.099 12.9108 13.543 13.2368 13.2402C13.5659 12.9375 14.0756 12.9143 14.4015 13.2402Z" fill="#2B3543"/>
<path d="M26.7362 14.4018C26.328 14.8099 25.9166 15.2213 25.5085 15.6295L22.5593 18.5787C21.3746 19.7634 20.19 20.948 19.0014 22.1366L15.918 25.22C15.4179 25.7201 14.9306 26.2305 14.4202 26.7177C14.4138 26.7242 14.4074 26.7306 14.4003 26.7377C14.0943 27.0437 13.5383 27.0636 13.2356 26.7377C12.9328 26.4086 12.9097 25.8982 13.2356 25.5729C13.6437 25.1647 14.0551 24.7534 14.4633 24.3452L17.4125 21.396C18.5972 20.2113 19.7818 19.0267 20.9704 17.8381L24.0538 14.7547C24.5539 14.2546 25.0412 13.7442 25.5515 13.2569C25.558 13.2505 25.5644 13.2441 25.5715 13.237C25.8774 12.931 26.4335 12.9111 26.7362 13.237C27.039 13.5661 27.0621 14.0759 26.7362 14.4018Z" fill="#2B3543"/>
</svg>
<p class="dashboard-header-container__left-area__close-button__title">Close</p>
</div>
<ProjectSelectionArea class="dashboard-header-container__left-area__project-selection"/>
</div>
<svg class="storj-title" @click.stop="onLogoClick" width="82" height="18" viewBox="0 0 82 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22457 3.77689C4.86259 4.07571 4.6816 4.4582 4.6816 4.94826C4.6816 5.43832 4.89879 5.82081 5.34523 6.10768C5.79167 6.39455 6.80521 6.72922 8.40998 7.12367C10.0148 7.51811 11.2455 8.1038 12.1384 8.88073C13.0192 9.65766 13.4656 10.8051 13.4656 12.2992C13.4656 13.7933 12.8985 15.0125 11.7643 15.9448C10.6301 16.8771 9.14601 17.3433 7.28785 17.3433C4.62127 17.3433 2.22015 16.3632 0.0844727 14.4029L1.19454 13.0283C1.79784 12.2992 2.87171 12.1677 3.656 12.6937C4.97118 13.5782 6.20191 14.0204 7.36024 14.0204C8.048 14.0204 8.59097 13.877 8.98915 13.5782C9.38733 13.2794 9.58038 12.8849 9.58038 12.3829C9.58038 11.8809 9.37526 11.4864 8.95295 11.1876C8.53064 10.8888 7.71016 10.59 6.46736 10.2912C4.51268 9.8489 3.07683 9.23931 2.17188 8.49824C1.25487 7.75716 0.80843 6.59774 0.80843 5.01998C0.80843 3.43026 1.3876 2.21107 2.53386 1.35047C3.68013 0.489871 5.11598 0.0595703 6.82934 0.0595703C7.95148 0.0595703 9.07361 0.250815 10.2078 0.633304C11.3299 1.01579 12.3073 1.55367 13.1519 2.25888L12.3194 3.45416C11.7523 4.255 10.6904 4.51796 9.80963 4.08766C8.79609 3.58564 7.77049 3.33463 6.72075 3.33463C6.08125 3.33463 5.58655 3.47807 5.22457 3.77689Z" fill="#2683FF"/>
<path d="M25.0851 3.66915V17.1399H21.3205V3.66915H16.5424V2.12724C16.5424 1.19492 17.3026 0.441895 18.2437 0.441895H29.8512V1.74475C29.8512 2.80855 28.9824 3.65719 27.9206 3.65719H25.0851V3.66915Z" fill="#2683FF"/>
<path d="M47.1779 14.8335C45.4766 16.483 43.3771 17.3077 40.8794 17.3077C38.3939 17.3077 36.2944 16.483 34.581 14.8335C32.8797 13.184 32.023 11.1401 32.023 8.68974C32.023 6.23942 32.8797 4.18354 34.581 2.546C36.2823 0.89652 38.3818 0.0717773 40.8794 0.0717773C43.365 0.0717773 45.4645 0.89652 47.1779 2.546C48.8792 4.19549 49.7358 6.23942 49.7358 8.68974C49.7358 11.1401 48.8792 13.184 47.1779 14.8335ZM45.8989 8.68974C45.8989 7.19564 45.4162 5.92864 44.451 4.8768C43.4857 3.82495 42.3032 3.29903 40.8915 3.29903C39.4798 3.29903 38.2973 3.82495 37.3321 4.8768C36.3668 5.92864 35.8841 7.19564 35.8841 8.68974C35.8841 10.1838 36.3668 11.4389 37.3321 12.4907C38.2973 13.5306 39.4798 14.0565 40.8915 14.0565C42.3032 14.0565 43.4857 13.5306 44.451 12.4907C45.4162 11.4508 45.8989 10.1838 45.8989 8.68974Z" fill="#2683FF"/>
<path d="M66.8695 5.98799C66.8695 8.66541 65.7956 10.3866 63.66 11.1755L67.9313 17.1399H65.3251C64.0581 17.1399 62.8757 16.5303 62.1517 15.5024L59.5696 11.821H56.9513V15.4905C56.9513 16.4108 56.2032 17.1519 55.2741 17.1519H53.1867V0.441895H59.5696C62.1879 0.441895 64.0581 0.884148 65.1803 1.7567C66.3024 2.62926 66.8695 4.03968 66.8695 5.98799ZM62.3327 7.9602C62.8033 7.54185 63.0325 6.88445 63.0325 5.98799C63.0325 5.09153 62.7912 4.46998 62.3086 4.13531C61.8259 3.80063 60.9813 3.63329 59.7747 3.63329H56.9513V8.58174H59.7023C60.9934 8.58174 61.8621 8.37855 62.3327 7.9602Z" fill="#2683FF"/>
<path d="M72.5888 3.64524V1.82842C72.5888 1.06344 73.2162 0.441895 73.9884 0.441895H81.3607V11.3309C81.3607 13.327 80.8419 14.8091 79.8042 15.8012C78.7665 16.7933 77.4393 17.2834 75.8104 17.2834C74.5193 17.2834 73.3248 16.9726 72.2389 16.3391C71.2012 15.7415 70.9357 14.3788 71.6356 13.4107L72.456 12.2871C73.4696 13.3748 74.5314 13.9127 75.6415 13.9127C76.1724 13.9127 76.6309 13.7095 77.0049 13.3031C77.379 12.8967 77.572 12.2871 77.572 11.4743V3.64524H72.5888Z" fill="#2683FF"/>
</svg>
<div class="dashboard-header-container__right-area">
<NewProjectArea class="dashboard-header-container__right-area__new-project"/>
<AccountButton class="dashboard-header-container__right-area__account-button"/>
</div>
<ProjectCreationSuccessPopup/>
<NavigationArea
class="adapted-navigation"
v-if="isNavigationVisible"
/>
<div class="navigation-blur" v-if="isNavigationVisible"></div>
</div>