From 2db6980098768977e9b90a7b64f6b21b808822ea Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Mon, 9 Mar 2020 14:03:01 +0100
Subject: [PATCH] fix toggle button position

---
 .../ui-components/src/navigation/Section.tsx  | 35 ++++++++++---------
 .../src/repos/containers/RepositoryRoot.tsx   |  3 +-
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/scm-ui/ui-components/src/navigation/Section.tsx b/scm-ui/ui-components/src/navigation/Section.tsx
index 871e9b43be..17ebf7b291 100644
--- a/scm-ui/ui-components/src/navigation/Section.tsx
+++ b/scm-ui/ui-components/src/navigation/Section.tsx
@@ -1,13 +1,12 @@
-import React, { FC, ReactElement, ReactNode, useEffect, useState } from "react";
-import { Button } from "../buttons";
+import React, { FC, ReactElement, ReactNode, useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 import SubNavigation from "./SubNavigation";
-import { useLocation, matchPath } from "react-router-dom";
+import { matchPath, useLocation } from "react-router-dom";
 
 type Props = {
   label: string;
   children: ReactElement[];
-  collapsed?: boolean;
+  collapsed: boolean;
   onCollapse?: (newStatus: boolean) => void;
   scrollTransitionAt?: number;
 };
@@ -28,19 +27,19 @@ const SectionContainer = styled.div<PositionProps>`
   width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
 `;
 
-const SmallButton = styled(Button)<CollapsedProps>`
-  padding-left: 1rem;
-  padding-right: 1rem;
-  margin-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")};
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
+const Icon = styled.i<CollapsedProps>`
+  padding-left: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")}
+  padding-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.3rem")};
+  height: 1.5rem;    
+  font-size: 24px;
+  margin-top: -0.75rem;
 `;
 
 const MenuLabel = styled.p<CollapsedProps>`
-  min-height: 2.5rem;
+  height: 3.2rem;
   display: flex;
-  justify-content: ${props => (props.collapsed ? "center" : "left")};
+  align-items: center;
+  justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
 `;
 
 const createParentPath = (to: string) => {
@@ -99,11 +98,15 @@ const Section: FC<Props> = ({ label, children, collapsed = false, onCollapse, sc
       scrollPositionY={onCollapse ? scrollPositionY : 0}
       scrollTransitionAt={scrollTransitionAt ? scrollTransitionAt : 250}
     >
-      <MenuLabel className="menu-label" collapsed={isCollapsed}>
+      <MenuLabel
+        className="menu-label"
+        collapsed={isCollapsed}
+        onClick={onCollapse ? () => onCollapse(!isCollapsed) : undefined}
+      >
         {onCollapse && !subNavActive && (
-          <SmallButton color="info" className="is-medium" action={() => onCollapse(!isCollapsed)} collapsed={isCollapsed}>
+          <Icon color="info" className="is-medium" collapsed={isCollapsed}>
             {arrowIcon}
-          </SmallButton>
+          </Icon>
         )}
         {isCollapsed ? "" : label}
       </MenuLabel>
diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
index 78c55e2475..5787b6f12f 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -129,8 +129,7 @@ class RepositoryRoot extends React.Component<Props, State> {
     const extensionProps = {
       repository,
       url,
-      indexLinks,
-      collapsedRepositoryMenu: menuCollapsed
+      indexLinks
     };
 
     const redirectUrlFactory = binder.getExtension("repository.redirect", this.props);