From ec0e1ec3207640c4a83071379b46917c4a46cb34 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Mon, 8 Jan 2024 09:52:03 +0100
Subject: [PATCH] Constant navigation width independent of content

Fixes issues that occurred after #224.

Pushed-by: Florian Scholdei<florian.scholdei@cloudogu.com>
Co-authored-by: Florian Scholdei<florian.scholdei@cloudogu.com>
---
 .../src/layout/SecondaryNavigationColumn.tsx    | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx b/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
index 4a3dfd0c67..9ec0e125d1 100644
--- a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
+++ b/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
@@ -23,13 +23,26 @@
  */
 import React, { FC } from "react";
 import styled from "styled-components";
+import { useSecondaryNavigation } from "../useSecondaryNavigation";
 
-const SecondaryColumn = styled.div`
+const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   flex: 0 0 auto;
+  /* Navigation width should be as constant as possible. */
+  width: ${(props: { collapsed: boolean }) => (props.collapsed ? "5.5rem" : "16rem")};
+  /* Render this column to full size if column construct breaks (page size too small). */
+  @media (max-width: 785px) {
+    width: 100%;
+  }
 `;
 
 const SecondaryNavigationColumn: FC = ({ children }) => {
-  return <SecondaryColumn className="column">{children}</SecondaryColumn>;
+  const { collapsed } = useSecondaryNavigation();
+
+  return (
+    <SecondaryColumn className="column" collapsed={collapsed}>
+      {children}
+    </SecondaryColumn>
+  );
 };
 
 export default SecondaryNavigationColumn;