Make TopBar optional in some layouts

The existence of the TopBar widget depends on some props related to it.

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>

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>

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}

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>

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>

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>