From 798312f803038d52463698caf0f415914668d4be Mon Sep 17 00:00:00 2001
From: Fran McDade <frano-m@users.noreply.github.com>
Date: Fri, 22 Nov 2024 17:03:57 +1000
Subject: [PATCH] feat: update contentlayout to centre content when there is no
 navigation (#282) (#286)

Co-authored-by: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
---
 .../ContentLayout/contentLayout.styles.ts       | 17 +++++++++++++----
 .../components/ContentLayout/contentLayout.tsx  | 10 +++++++---
 src/views/ContentView/contentView.tsx           |  5 ++++-
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/Layout/components/ContentLayout/contentLayout.styles.ts b/src/components/Layout/components/ContentLayout/contentLayout.styles.ts
index 1a7785a0..2ae78525 100644
--- a/src/components/Layout/components/ContentLayout/contentLayout.styles.ts
+++ b/src/components/Layout/components/ContentLayout/contentLayout.styles.ts
@@ -30,6 +30,7 @@ const COLOR: Record<
 };
 
 interface LayoutProps {
+  hasNavigation?: boolean;
   panelColor?: PanelBackgroundColor;
 }
 
@@ -49,10 +50,18 @@ export const ContentLayout = styled.div<LayoutProps>`
   margin: 0 auto;
 
   ${mediaDesktopSmallUp} {
-    grid-template-areas: "navigation content";
-    grid-template-columns:
-      ${NAV_GRID_WIDTH}px
-      1fr;
+    ${({ hasNavigation }) =>
+      hasNavigation
+        ? css`
+            grid-template-areas: "navigation content";
+            grid-template-columns:
+              ${NAV_GRID_WIDTH}px
+              1fr;
+          `
+        : css`
+            grid-template-areas: "content";
+            grid-template-columns: 1fr;
+          `};
   }
 
   ${media1366Up} {
diff --git a/src/components/Layout/components/ContentLayout/contentLayout.tsx b/src/components/Layout/components/ContentLayout/contentLayout.tsx
index 2d054adf..43d5666e 100644
--- a/src/components/Layout/components/ContentLayout/contentLayout.tsx
+++ b/src/components/Layout/components/ContentLayout/contentLayout.tsx
@@ -1,6 +1,7 @@
 import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
 import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { BaseComponentProps } from "../../../types";
 import { LayoutStyle } from "./common/entities";
 import {
   Content,
@@ -14,7 +15,6 @@ import {
 } from "./contentLayout.styles";
 
 export interface ContentLayoutProps {
-  className?: string;
   content: ReactNode;
   layoutStyle?: LayoutStyle;
   navigation?: ReactNode;
@@ -27,13 +27,17 @@ export const ContentLayout = ({
   layoutStyle,
   navigation,
   outline,
-}: ContentLayoutProps): JSX.Element => {
+}: BaseComponentProps & ContentLayoutProps): JSX.Element => {
   const { asPath } = useRouter();
   const {
     layoutState: { headerHeight },
   } = useLayoutState();
   return (
-    <Layout className={className} panelColor={layoutStyle?.content}>
+    <Layout
+      className={className}
+      hasNavigation={Boolean(navigation)}
+      panelColor={layoutStyle?.content}
+    >
       {navigation && (
         <NavigationGrid
           headerHeight={headerHeight}
diff --git a/src/views/ContentView/contentView.tsx b/src/views/ContentView/contentView.tsx
index c6f74e0e..4bddbdf8 100644
--- a/src/views/ContentView/contentView.tsx
+++ b/src/views/ContentView/contentView.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 import { LayoutStyle } from "../../components/Layout/components/ContentLayout/common/entities";
 import { ContentLayout } from "../../components/Layout/components/ContentLayout/contentLayout";
+import { BaseComponentProps } from "../../components/types";
 
 export interface ContentViewProps {
   content: ReactNode;
@@ -10,13 +11,15 @@ export interface ContentViewProps {
 }
 
 export const ContentView = ({
+  className,
   content,
   layoutStyle,
   navigation,
   outline,
-}: ContentViewProps): JSX.Element => {
+}: BaseComponentProps & ContentViewProps): JSX.Element => {
   return (
     <ContentLayout
+      className={className}
       content={content}
       layoutStyle={layoutStyle}
       navigation={navigation}