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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+