diff --git a/assets/components/header/header.vue b/assets/components/header/header.vue index 74072b42..3d1dae11 100644 --- a/assets/components/header/header.vue +++ b/assets/components/header/header.vue @@ -78,39 +78,75 @@ @click.stop="toggleSidebar" > -
- + + - + + + + + + + + + +
+ @@ -318,6 +354,73 @@ export default { } } +.header-account { + padding: 1rem; + + &:hover { + cursor: pointer; + + .account { + border-color: var(--primary); + } + + .avatar { + fill: var(--primary); + } + } +} + +.account { + width: 1.25rem; + height: 1.25rem; + display: flex; + justify-content: center; + border: solid 2px var(--shadow); + border-radius: 1.5rem; + overflow: hidden; + + .avatar { + width: 1rem; + height: 1rem; + margin: .3rem 0 0 0; + fill: var(--shadow); + } +} + +.menu-items { + list-style: none; + padding: 0; + margin: 0; +} + +.menu-item { + display: flex; + padding: .75rem 1rem .75rem .75rem; + + .icon { + fill: var(--darken); + margin: 0 1rem 0 0; + } + + &.disabled { + color: var(--darken-weak); + cursor: default; + + .icon { + fill: var(--darken-weak); + } + } + + &:hover:not(.disabled) { + cursor: pointer; + color: var(--primary); + + .icon { + fill: var(--primary); + } + } +} + .search-compact { display: none; height: 100%; @@ -352,8 +455,8 @@ export default { display: flex; } - .header-toggles { - margin: 0; + .header-account { + padding: 1rem .5rem 1rem 1rem; } } @@ -374,16 +477,7 @@ export default { display: none; } - .header-toggles { - display: none; - } -} - -@media(max-width: $breakpoint-micro) { -} - -@media(max-width: $breakpoint-nano) { - .header-toggles { + .header-account { display: none; } } diff --git a/assets/img/icons/enter.svg b/assets/img/icons/enter.svg new file mode 100644 index 00000000..db154cd2 --- /dev/null +++ b/assets/img/icons/enter.svg @@ -0,0 +1,6 @@ + + +enter + + + diff --git a/assets/img/icons/enter2.svg b/assets/img/icons/enter2.svg new file mode 100644 index 00000000..d429825e --- /dev/null +++ b/assets/img/icons/enter2.svg @@ -0,0 +1,5 @@ + + +enter2 + + diff --git a/assets/img/icons/enter3.svg b/assets/img/icons/enter3.svg new file mode 100644 index 00000000..87000ea5 --- /dev/null +++ b/assets/img/icons/enter3.svg @@ -0,0 +1,5 @@ + + +enter3 + + diff --git a/assets/img/icons/exit.svg b/assets/img/icons/exit.svg new file mode 100644 index 00000000..38c323ae --- /dev/null +++ b/assets/img/icons/exit.svg @@ -0,0 +1,6 @@ + + +exit + + + diff --git a/assets/img/icons/exit2.svg b/assets/img/icons/exit2.svg new file mode 100644 index 00000000..f099ebfb --- /dev/null +++ b/assets/img/icons/exit2.svg @@ -0,0 +1,5 @@ + + +exit2 + + diff --git a/assets/img/icons/exit3.svg b/assets/img/icons/exit3.svg new file mode 100644 index 00000000..a8fbd64e --- /dev/null +++ b/assets/img/icons/exit3.svg @@ -0,0 +1,5 @@ + + +exit3 + + diff --git a/assets/img/icons/user-tie.svg b/assets/img/icons/user-tie.svg new file mode 100644 index 00000000..8aaf0fda --- /dev/null +++ b/assets/img/icons/user-tie.svg @@ -0,0 +1,5 @@ + + +user-tie + + diff --git a/assets/img/icons/user3-long.svg b/assets/img/icons/user3-long.svg new file mode 100644 index 00000000..be991324 --- /dev/null +++ b/assets/img/icons/user3-long.svg @@ -0,0 +1,32 @@ + + + + + + image/svg+xml + + user3 + + + + + user3 + + diff --git a/assets/img/icons/user3.svg b/assets/img/icons/user3.svg new file mode 100644 index 00000000..f9da1911 --- /dev/null +++ b/assets/img/icons/user3.svg @@ -0,0 +1,5 @@ + + +user3 + + diff --git a/assets/img/icons/user7.svg b/assets/img/icons/user7.svg new file mode 100644 index 00000000..08413ab5 --- /dev/null +++ b/assets/img/icons/user7.svg @@ -0,0 +1,5 @@ + + +user7 + + diff --git a/assets/img/icons/users5.svg b/assets/img/icons/users5.svg new file mode 100644 index 00000000..f6631b23 --- /dev/null +++ b/assets/img/icons/users5.svg @@ -0,0 +1,5 @@ + + +users5 + +