feat: dock hover and pinning focus

1 files changed, 48 insertions, 6 deletions

diff --git a/assets/style.scss b/assets/style.scss
index b03393c..75b058f 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -147,7 +147,7 @@ p {
   border-width: 0 2px 0 0;
   border-color: black;
   border-style: solid;
-  height: auto;
+  height: 100%;
   width: 400px;
   flex: 0 0 auto;
   align-self: stretch;
@@ -405,17 +405,16 @@ p {
 
 .sidebar {
   display: flex;
+  z-index: 1;
 }
 
 .dock {
+  z-index: 30;
   display: flex;
   flex-direction: column;
   border-width: 0 2px 0 0;
 }
 
-.shortcuts {
-  padding: 8px 0;
-}
 
 .dock-item {
   display: flex;
@@ -451,11 +450,12 @@ p {
   opacity: 100%;
 }
 
-.shortcuts {
+.dock .shortcuts {
+  padding: 8px 0;
   border-bottom: 2px solid black;
 }
 
-.dock-item img {
+.dock .shortcuts .dock-item img {
   width: 64px;
   height: 64px;
   padding: 4px 8px;
@@ -471,6 +471,48 @@ p {
   right: 0;
 }
 
+.dock .pins {
+  flex: 1 1 auto;
+}
+
+.dock .personal {
+  padding: 8px 0;
+  flex: 0 0 auto;
+  border-top: 2px solid black;
+}
+
+.dock .personal .dock-item {
+  padding: 8px 16px
+}
+
+.dock .personal .avatar-with-presence .avatar {
+  width: 48px;
+  height: 48px;
+}
+
+.sidebar-drawer {
+  height: auto;
+  position: relative;
+  z-index: 5;
+}
+
+.sidebar-hovering-drawer {
+  z-index: 10;
+}
+
+.sidebar .sidebar-hovering-drawer>* {
+  position: absolute;
+  left: 0;
+  transition: left 0.2s ease-in;
+  transition-behaviour: allow-discrete;
+}
+@starting-style {
+  .sidebar .sidebar-hovering-drawer>* {
+    /* TODO: allow to edit this width */
+    left: -400px;
+  }
+}
+
 /* font-families */
 
 /* thai */