From 0acf2e90677aea74da12d640a6d5bd5366419533 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Wed, 8 Mar 2023 19:26:56 +0100
Subject: [PATCH] wip

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../src/components/editor-page/editor-page-content.tsx |  3 +--
 .../sidebar/sidebar-button/sidebar-button.module.scss  |  3 +++
 .../src/components/editor-page/sidebar/sidebar.tsx     |  3 +++
 .../editor-page/sidebar/style/sidebar.module.scss      | 10 ++++++----
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/editor-page/editor-page-content.tsx b/frontend/src/components/editor-page/editor-page-content.tsx
index 38e99f4ab..a09dd801e 100644
--- a/frontend/src/components/editor-page/editor-page-content.tsx
+++ b/frontend/src/components/editor-page/editor-page-content.tsx
@@ -130,14 +130,13 @@ export const EditorPageContent: React.FC = () => {
         <HeadMetaProperties />
         <MotdModal />
         <div className={'d-flex flex-column vh-100'}>
-          <AppBar mode={AppBarMode.EDITOR} />
           <div className={'flex-fill d-flex h-100 w-100 overflow-hidden flex-row'}>
+            <Sidebar />
             <Splitter
               left={leftPane}
               right={rightPane}
               additionalContainerClassName={'overflow-hidden position-relative'}
             />
-            <Sidebar />
           </div>
         </div>
       </ExtensionEventEmitterProvider>
diff --git a/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss b/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss
index 5e7cf93cd..511deeb39 100644
--- a/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss
+++ b/frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss
@@ -11,6 +11,7 @@
   flex: 0 0 $height;
   width: 100%;
   display: flex;
+  flex-wrap: revert;
   align-items: center;
   border: solid 1px rgba(0, 0, 0, 0.15);
   user-select: none;
@@ -19,6 +20,7 @@
   padding: 0;
   transition: height 0.2s, flex-basis 0.2s;
   overflow: hidden;
+  flex-direction: row-reverse;
 
   &.hide {
     flex-basis: 0;
@@ -55,6 +57,7 @@
     text-align: left;
     flex: 1 1 0;
     width: 0;
+    padding-left: 0.375rem;
   }
 
   @mixin colors {
diff --git a/frontend/src/components/editor-page/sidebar/sidebar.tsx b/frontend/src/components/editor-page/sidebar/sidebar.tsx
index a1ef206ff..fcc533129 100644
--- a/frontend/src/components/editor-page/sidebar/sidebar.tsx
+++ b/frontend/src/components/editor-page/sidebar/sidebar.tsx
@@ -3,6 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import LogoColor from '../../common/hedge-doc-logo/logo_color.svg'
+import LogoColorVertical from '../../common/hedge-doc-logo/logo_text_color_vertical.svg'
 import { DeleteNoteSidebarEntry } from './delete-note-sidebar-entry/delete-note-sidebar-entry'
 import { AliasesSidebarEntry } from './specific-sidebar-entries/aliases-sidebar-entry'
 import { ExportMenuSidebarMenu } from './specific-sidebar-entries/export-menu-sidebar-menu'
@@ -41,6 +43,7 @@ export const Sidebar: React.FC = () => {
 
   return (
     <div className={styles['slide-sidebar']}>
+      <LogoColor height={'40px'} width={'40px'} className={'p-2'}></LogoColor>
       <div ref={sideBarRef} className={`${styles['sidebar-inner']} ${selectionIsNotNone ? styles['show'] : ''}`}>
         <UsersOnlineSidebarMenu
           menuId={DocumentSidebarMenuSelection.USERS_ONLINE}
diff --git a/frontend/src/components/editor-page/sidebar/style/sidebar.module.scss b/frontend/src/components/editor-page/sidebar/style/sidebar.module.scss
index bbb3c9998..a71eab1ae 100644
--- a/frontend/src/components/editor-page/sidebar/style/sidebar.module.scss
+++ b/frontend/src/components/editor-page/sidebar/style/sidebar.module.scss
@@ -9,23 +9,25 @@
 
   flex: 0 0 $height;
   position: relative;
+  border-right: solid 1px white;
 
   .sidebar-inner {
-    height: 100%;
+    border-right: solid 1px white;
+    height: calc(100% - 50px);
     display: flex;
     overflow-y: auto;
     flex-direction: column;
     position: absolute;
     z-index: 999;
     width: $menu-width;
-    top: 0;
-    left: 0;
+    top: $height;
+    left: (-$menu-width + $height) + 1px;
     transition: left 0.3s;
     box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
 
     &:hover, &.show {
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-      left: (-$menu-width + $height);
+      left: 0;
     }
 
     background: var(--bs-light);