From 642192f4acdeb595175aeb41703ac51fe648e3b5 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Sun, 23 May 2021 15:28:04 +0800
Subject: [PATCH] Make TopBar optional in some layouts

The existence of the TopBar widget depends on some props related to it.
---
 src/layouts/Basic/index.tsx               | 21 ++++++++++++------
 src/layouts/BasicNarrow/index.tsx         | 22 +++++++++++++------
 src/layouts/LeftSidebar/index.tsx         |  2 +-
 src/layouts/LeftSidebarWithMenu/index.tsx | 26 ++++++++++++++++-------
 src/layouts/RightSidebarStatic/index.tsx  | 23 ++++++++++++++------
 src/widgets/TopBar/index.tsx              | 16 +++++++++++---
 6 files changed, 79 insertions(+), 31 deletions(-)

diff --git a/src/layouts/Basic/index.tsx b/src/layouts/Basic/index.tsx
index f174820..bce0ce7 100644
--- a/src/layouts/Basic/index.tsx
+++ b/src/layouts/Basic/index.tsx
@@ -34,12 +34,21 @@ export const Layout: React.FC<Props> = ({
 	return (
 		<>
 			<Config />
-			<TopBar
-				brand={brand}
-				userLink={userLink}
-			>
-				{topBarCenter}
-			</TopBar>
+			{
+				(
+					brand
+					|| userLink
+					|| topBarCenter
+				)
+				&& (
+					<TopBar
+						brand={brand}
+						userLink={userLink}
+					>
+						{topBarCenter}
+					</TopBar>
+				)
+			}
 			<ContentBase>
 				{children}
 			</ContentBase>
diff --git a/src/layouts/BasicNarrow/index.tsx b/src/layouts/BasicNarrow/index.tsx
index 89894ea..49b99a3 100644
--- a/src/layouts/BasicNarrow/index.tsx
+++ b/src/layouts/BasicNarrow/index.tsx
@@ -34,12 +34,22 @@ export const Layout: React.FC<Props> = ({
 	return (
 		<>
 			<Config />
-			<TopBar
-				brand={brand}
-				userLink={userLink}
-			>
-				{topBarCenter}
-			</TopBar>
+			{
+				(
+					brand
+					|| userLink
+					|| topBarCenter
+				)
+				&& (
+					<TopBar
+						span="narrow"
+						brand={brand}
+						userLink={userLink}
+					>
+						{topBarCenter}
+					</TopBar>
+				)
+			}
 			<ContentBase>
 				{children}
 			</ContentBase>
diff --git a/src/layouts/LeftSidebar/index.tsx b/src/layouts/LeftSidebar/index.tsx
index 824ce55..645acbe 100644
--- a/src/layouts/LeftSidebar/index.tsx
+++ b/src/layouts/LeftSidebar/index.tsx
@@ -108,7 +108,7 @@ export const Layout: React.FC<Props> = ({
 				)
 			}
 			<TopBar
-				wide
+				span="wide"
 				brand={brand}
 				menuLink={menuLink}
 				userLink={userLink}
diff --git a/src/layouts/LeftSidebarWithMenu/index.tsx b/src/layouts/LeftSidebarWithMenu/index.tsx
index 421c3e8..37031e7 100644
--- a/src/layouts/LeftSidebarWithMenu/index.tsx
+++ b/src/layouts/LeftSidebarWithMenu/index.tsx
@@ -350,14 +350,24 @@ export const Layout: React.FC<Props> = ({
 				)
 			}
 			<>
-				<TopBar
-					wide
-					brand={brand}
-					menuLink={sidebarMain ? menuLink : undefined}
-					userLink={userLink}
-				>
-					{topBarCenter}
-				</TopBar>
+				{
+					(
+						brand
+						|| userLink
+						|| topBarCenter
+						|| sidebarMain
+					)
+					&& (
+						<TopBar
+							span="wide"
+							brand={brand}
+							menuLink={sidebarMain ? menuLink : undefined}
+							userLink={userLink}
+						>
+							{topBarCenter}
+						</TopBar>
+					)
+				}
 				<SidebarBase>
 					<SidebarMenu>
 						<SidebarMenuSize>
diff --git a/src/layouts/RightSidebarStatic/index.tsx b/src/layouts/RightSidebarStatic/index.tsx
index cef23e8..92719fc 100644
--- a/src/layouts/RightSidebarStatic/index.tsx
+++ b/src/layouts/RightSidebarStatic/index.tsx
@@ -75,13 +75,22 @@ export const Layout: React.FC<Props> = ({
 	return (
 		<>
 			<Config />
-			<TopBar
-				wide
-				brand={brand}
-				userLink={userLink}
-			>
-				{topBarCenter}
-			</TopBar>
+			{
+				(
+					brand
+					|| userLink
+					|| topBarCenter
+				)
+				&& (
+					<TopBar
+						span="wide"
+						brand={brand}
+						userLink={userLink}
+					>
+						{topBarCenter}
+					</TopBar>
+				)
+			}
 			<ContentBase>
 				{children}
 			</ContentBase>
diff --git a/src/widgets/TopBar/index.tsx b/src/widgets/TopBar/index.tsx
index 2b162b2..cec09c4 100644
--- a/src/widgets/TopBar/index.tsx
+++ b/src/widgets/TopBar/index.tsx
@@ -35,6 +35,10 @@ const Container = styled('div')({
 	alignItems: 'center',
 })
 
+const NarrowContainer = styled(Container)({
+	maxWidth: configVar('base-width'),
+})
+
 const WideContainer = styled(Container)({
 	...minWidthFactor(3)({
 		maxWidth: `calc(${configVar('base-width')} * 3)`,
@@ -82,21 +86,27 @@ const MenuLinkContainer = styled(LinkContainer)({
 	}),
 })
 
+const CONTAINER_COMPONENTS = {
+	narrow: NarrowContainer,
+	normal: Container,
+	wide: WideContainer,
+}
+
 type Props = {
-	wide?: boolean,
+	span?: keyof typeof CONTAINER_COMPONENTS,
 	brand?: React.ReactNode,
 	menuLink?: React.ReactNode,
 	userLink?: React.ReactNode,
 }
 
 const TopBar: React.FC<Props> = ({
-	wide,
+	span = 'normal',
 	brand,
 	menuLink,
 	userLink,
 	children,
 }) => {
-	const ContainerComponent = wide ? WideContainer : Container
+	const { [span as keyof typeof CONTAINER_COMPONENTS]: ContainerComponent = Container } = CONTAINER_COMPONENTS
 	return (
 		<Base>
 			<ContainerComponent>