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

AmruthPillai · Nov 14, 2024 · c872421 · c872421
1 parent e29f973
commit c872421
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 10 deletions.
diff --git a/apps/artboard/src/templates/azurill.tsx b/apps/artboard/src/templates/azurill.tsx
@@ -574,7 +574,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>
           ))}

diff --git a/apps/artboard/src/templates/chikorita.tsx b/apps/artboard/src/templates/chikorita.tsx
@@ -578,15 +578,15 @@ 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) => (
           <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
         ))}
       </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>
         ))}

diff --git a/apps/artboard/src/templates/ditto.tsx b/apps/artboard/src/templates/ditto.tsx
@@ -621,7 +621,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>
           ))}

diff --git a/apps/artboard/src/templates/gengar.tsx b/apps/artboard/src/templates/gengar.tsx
@@ -599,7 +599,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"

diff --git a/apps/artboard/src/templates/glalie.tsx b/apps/artboard/src/templates/glalie.tsx
@@ -591,7 +591,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 />}
@@ -601,7 +601,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>
         ))}

diff --git a/apps/artboard/src/templates/leafish.tsx b/apps/artboard/src/templates/leafish.tsx
@@ -527,13 +527,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>
           ))}

diff --git a/apps/artboard/src/templates/pikachu.tsx b/apps/artboard/src/templates/pikachu.tsx
@@ -621,7 +621,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) => (