Merge pull request #2103 from 0x346e3730/feat/full-width-main-if-no-sidebar

feat(templates): make main full-width if sidebar is empty

apps/artboard/src/templates/azurill.tsx

@@ -562,7 +562,7 @@ export const Azurill = ({ columns, isFirstPage = false }: TemplateProps) => {
           ))}
         </div>
 
-        <div className="main group col-span-2 space-y-4">
+        <div className={cn("main group space-y-4", sidebar.length !== 0 ? "col-span-2" : "col-span-3")}>
           {main.map((section) => (
             <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
           ))}

apps/artboard/src/templates/chikorita.tsx

@@ -566,7 +566,7 @@ export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
 
   return (
     <div className="grid min-h-[inherit] grid-cols-3">
-      <div className="main p-custom group col-span-2 space-y-4">
+      <div className={cn("main p-custom group space-y-4", sidebar.length !== 0 ? "col-span-2" : "col-span-3")}>
         {isFirstPage && <Header />}
 
         {main.map((section) => (
@@ -574,7 +574,7 @@ export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
         ))}
       </div>
 
-      <div className="sidebar p-custom group h-full space-y-4 bg-primary text-background">
+      <div className={cn("sidebar p-custom group h-full space-y-4 bg-primary text-background", sidebar.length === 0 && "hidden")}>
         {sidebar.map((section) => (
           <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
         ))}

apps/artboard/src/templates/ditto.tsx

@@ -609,7 +609,7 @@ export const Ditto = ({ columns, isFirstPage = false }: TemplateProps) => {
           ))}
         </div>
 
-        <div className="main p-custom group col-span-2 space-y-4">
+        <div className={cn("main p-custom group space-y-4", sidebar.length !== 0 ? "col-span-2" : "col-span-3")}>
           {main.map((section) => (
             <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
           ))}

apps/artboard/src/templates/gengar.tsx

@@ -587,7 +587,7 @@ export const Gengar = ({ columns, isFirstPage = false }: TemplateProps) => {
         </div>
       </div>
 
-      <div className="main group col-span-2">
+      <div className={cn("main group", sidebar.length !== 0 ? "col-span-2" : "col-span-3")}>
         {isFirstPage && (
           <div
             className="p-custom space-y-4"

apps/artboard/src/templates/glalie.tsx

@@ -579,7 +579,7 @@ export const Glalie = ({ columns, isFirstPage = false }: TemplateProps) => {
   return (
     <div className="grid min-h-[inherit] grid-cols-3">
       <div
-        className="sidebar p-custom group space-y-4"
+        className={cn("sidebar p-custom group space-y-4", sidebar.length === 0 && "hidden")}
         style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
       >
         {isFirstPage && <Header />}
@@ -589,7 +589,7 @@ export const Glalie = ({ columns, isFirstPage = false }: TemplateProps) => {
         ))}
       </div>
 
-      <div className="main p-custom group col-span-2 space-y-4">
+      <div className={cn("main p-custom group space-y-4", sidebar.length !== 0 ? "col-span-2" : "col-span-3")}>
         {main.map((section) => (
           <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
         ))}

apps/artboard/src/templates/leafish.tsx

@@ -519,13 +519,13 @@ export const Leafish = ({ columns, isFirstPage = false }: TemplateProps) => {
       {isFirstPage && <Header />}
 
       <div className="p-custom grid grid-cols-2 items-start space-x-6">
-        <div className="grid gap-y-4">
+        <div className={cn("grid gap-y-4", sidebar.length === 0 && "col-span-2")}>
           {main.map((section) => (
             <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
           ))}
         </div>
 
-        <div className="grid gap-y-4">
+        <div className={cn("grid gap-y-4", sidebar.length === 0 && "hidden")}>
           {sidebar.map((section) => (
             <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
           ))}

apps/artboard/src/templates/pikachu.tsx

@@ -609,7 +609,7 @@ export const Pikachu = ({ columns, isFirstPage = false }: TemplateProps) => {
         ))}
       </div>
 
-      <div className="main group col-span-2 space-y-4">
+      <div className={cn("main group space-y-4", sidebar.length !== 0 ? "col-span-2" : "col-span-3")}>
         {isFirstPage && <Header />}
 
         {main.map((section) => (