feat: update contentlayout to centre content when there is no navigat…

…ion (#282) (#286) Co-authored-by: Fran McDade <[email protected]>
DataBiosphere · Nov 22, 2024 · 798312f · 798312f
1 parent bae0178
commit 798312f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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}