From 75695f9fb116cdc6f8052dec83832a3f207e901b Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 14 Dec 2023 09:01:48 +0100
Subject: [PATCH] Convert truthy value to true and reintroduce
 PrimaryContentColumn sizing

Fixes issues that occurred after #224.
---
 .../src/layout/PrimaryContentColumn.tsx        | 18 +++++++++++++++++-
 .../src/navigation/useActiveMatch.ts           |  7 ++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
index 93cc060d41..4ac25ad5c7 100644
--- a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
+++ b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
@@ -22,9 +22,25 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
+import styled from "styled-components";
+import { useSecondaryNavigation } from "../useSecondaryNavigation";
+
+const PrimaryColumn = styled.div<{ collapsed: boolean }>`
+  width: ${(props: { collapsed: boolean }) => (props.collapsed ? "89.7%" : "75%")};
+  /* Render this column to full size if column construct breaks (page size too small). */
+  @media (max-width: 785px) {
+    width: 100%;
+  }
+`;
 
 const PrimaryContentColumn: FC = ({ children }) => {
-  return <div className="column is-10">{children}</div>;
+  const { collapsed } = useSecondaryNavigation();
+
+  return (
+    <PrimaryColumn className="column" collapsed={collapsed}>
+      {children}
+    </PrimaryColumn>
+  );
 };
 
 export default PrimaryContentColumn;
diff --git a/scm-ui/ui-components/src/navigation/useActiveMatch.ts b/scm-ui/ui-components/src/navigation/useActiveMatch.ts
index 4b879bc55e..eb1540f95b 100644
--- a/scm-ui/ui-components/src/navigation/useActiveMatch.ts
+++ b/scm-ui/ui-components/src/navigation/useActiveMatch.ts
@@ -35,15 +35,16 @@ const useActiveMatch = ({ to, activeOnlyWhenExact, activeWhenMatch }: RoutingPro
 
   const match = useRouteMatch({
     path: urls.escapeUrlForRoute(path),
-    exact: activeOnlyWhenExact
+    exact: activeOnlyWhenExact,
   });
 
   const location = useLocation();
 
   const isActiveWhenMatch = () => {
     if (activeWhenMatch) {
-      return activeWhenMatch({
-        location
+      // noinspection PointlessBooleanExpressionJS could be a truthy value if a function is passed in
+      return !!activeWhenMatch({
+        location,
       });
     }
     return false;