user can logout

src/styles/panel.less

@@ -176,3 +176,4 @@
     }
   }
 }
+

src/styles/user-button.less

@@ -1,5 +1,5 @@
 .user-bar {
-  width: 200px;
+  width: 240px;
 
   .button {
     width: 100%;
@@ -12,6 +12,7 @@
   display: flex;
 
   user-select: none;
+  cursor: pointer;
 }
 
 .user-button-picture {
@@ -41,7 +42,7 @@
 }
 
 .user-button-name {
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .user-button-text {
@@ -50,3 +51,67 @@
   padding-top: 2px;
   font-weight: 200;
 }
+
+
+.user-panel {
+  position: relative;
+}
+
+.user-panel-menu {
+  position: absolute;
+  bottom: 45px;
+  left: 0;
+  width: 100%;
+  background: @dialog_background;
+  border-radius: 3px;
+  padding: 0 0 3px 0;
+  box-sizing: border-box;
+  z-index: -1
+}
+
+.user-panel-item {
+  padding: 10px 10px;
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+  transition: all 250ms;
+  color: white;
+  box-sizing: border-box;
+  user-select: none;
+  display: block;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  text-decoration: none;
+  font-weight: 200;
+
+  &:first-child::after {
+    border-radius: 3px 3px 0 0;
+  }
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(150deg, @blue_primary, @blue_secondary);
+    opacity: 0;
+    transition: opacity 0.3s;
+    z-index: -1;
+  }
+
+  &:hover::after {
+    opacity: 0.5;
+  }
+}
+
+.user-panel-text {
+  padding: 10px;
+  opacity: 0.5;
+  font-weight: 200;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+
+  div {
+    padding-top: 5px;
+  }
+}