From 9d69f1fe58fe88c1e1af95f49599c0a894dd2598 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Tue, 28 May 2024 14:32:54 +0200
Subject: [PATCH] fix: improve conditional Sidebar CSS

---
 components/ContentType/LoyaltyPage.tsx        | 9 ++++-----
 components/ContentType/loyaltyPage.module.css | 8 ++++----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/ContentType/LoyaltyPage.tsx b/components/ContentType/LoyaltyPage.tsx
index 1302a804f..e0cb7b42a 100644
--- a/components/ContentType/LoyaltyPage.tsx
+++ b/components/ContentType/LoyaltyPage.tsx
@@ -8,12 +8,11 @@ import styles from "./loyaltyPage.module.css"
 
 export default async function LoyaltyPage() {
   const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
-  const hasSidebar = !!loyaltyPage.sidebar.length
   return (
-    <section
-      className={`${styles.content} ${hasSidebar && styles.hasLeftSidebar}`}
-    >
-      {hasSidebar && <Sidebar blocks={loyaltyPage.sidebar} />}
+    <section className={styles.content}>
+      {loyaltyPage.sidebar.length ? (
+        <Sidebar blocks={loyaltyPage.sidebar} />
+      ) : null}
 
       <MaxWidth className={styles.blocks} tag="main">
         {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
diff --git a/components/ContentType/loyaltyPage.module.css b/components/ContentType/loyaltyPage.module.css
index 12d7cc0db..46bc93ea9 100644
--- a/components/ContentType/loyaltyPage.module.css
+++ b/components/ContentType/loyaltyPage.module.css
@@ -13,10 +13,6 @@
 }
 
 @media screen and (min-width: 950px) {
-  .hasLeftSidebar {
-    grid-template-columns: 30rem 1fr;
-  }
-
   .content {
     gap: 2.7rem;
     padding-bottom: 17.5rem;
@@ -25,6 +21,10 @@
     padding-top: 5.8rem;
   }
 
+  .content:has(> aside) {
+    grid-template-columns: 30rem 1fr;
+  }
+
   .blocks {
     gap: 6.4rem;
     padding-left: 0;