Side nav (#6309)

* [user panel] combined 7 commits into 1:

[user side nav] added 'fold/unfold' for the sidebar

[redesign] redesigned toolbar for 'my libs' & 'shared with all'; redesigned 'top bar' for 'help', 'clients' and other pages

[Shared with all] 'share existing libraries' dialog: added the 'close' icon back, enabled clicking outside to close the dialog

['Invite Guest' page] redesigned the toolbar

['Share Admin' - 'Links'] 'Share Links' page: redesigned the toolbar

['Share Admin' - 'Links'] 'Upload Links' page: redesigned the toolbar

cleaned up code

* [user side panel] update

* [user panel] update

* [code style] update: remove an eslint warning

frontend/src/css/layout.css

@@ -7,7 +7,10 @@
 
 /* for top bottom layout*/
 #header {
-  display: flex;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+  box-shadow: 0 2px 4px rgba(0,0,0, 10%);
+  z-index: 100;
 }
 
 /* for left right layout */
@@ -23,6 +26,22 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background: #fff;
+}
+
+.side-panel-folded {
+  flex-basis: 69px;
+}
+
+.user-panel .side-panel-north {
+  height: 49px;
+}
+
+.positioned-top-logo {
+  position: fixed;
+  top: .5rem;
+  left: 1rem;
+  z-index: 101;
 }
 
 .main-panel {
@@ -34,12 +53,12 @@
 @media (max-width: 767px) {
   .side-panel {
     position:fixed;
+    top: 0;
     left:-300px;
     z-index: 1031;
     width: 300px;
     max-width: calc(100% - 40px);
     height:100%;
-    background:#f8f8f8;
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     transition: all 0.3s ease;
@@ -57,16 +76,6 @@
   z-index: 100;
 }
 
-@media (max-width: 767px) {
-  .side-panel-north {
-    border-right: 1px solid #eee;
-  }
-
-  .main-panel-north {
-    padding-bottom: 0.25rem;
-  }
-}
-
 .side-panel-center,
 .main-panel-center {
   display: flex;