From 0c34803cfb9e9786c392b709fdb8003e339d2487 Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Wed, 24 Aug 2022 23:37:08 +0300
Subject: [PATCH] added styles for adaptive

---
 src/components/layouts/ThreeColumn/ColumnLayout.css | 7 ++++++-
 src/components/layouts/ThreeColumn/ColumnLayout.tsx | 8 ++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.css b/src/components/layouts/ThreeColumn/ColumnLayout.css
index 7ad8bb3..b096e2a 100644
--- a/src/components/layouts/ThreeColumn/ColumnLayout.css
+++ b/src/components/layouts/ThreeColumn/ColumnLayout.css
@@ -1,5 +1,6 @@
 .left-bar {
   grid-area: lb;
+  max-width: 300px;
 }
 
 .main-bar {
@@ -8,6 +9,7 @@
 
 .right-bar {
   grid-area: rb;
+  max-width: 300px;
 }
 
 .column-layout-grid {
@@ -17,6 +19,9 @@
 }
 
 @media (min-width: 768px) {
+  .right-bar {
+    max-width: 100%;
+  }
   .column-layout-grid {
     display: grid;
     grid-template-columns: minmax(300px, 1fr);
@@ -29,7 +34,7 @@
 @media (min-width: 1280px) {
   .column-layout-grid {
     display: grid;
-    grid-template-columns: 300px 1fr 300px;
+    grid-template-columns: auto 1fr auto;
     grid-template-areas: "lb main rb";
   }
 }
diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.tsx b/src/components/layouts/ThreeColumn/ColumnLayout.tsx
index 164857d..2b0c11e 100644
--- a/src/components/layouts/ThreeColumn/ColumnLayout.tsx
+++ b/src/components/layouts/ThreeColumn/ColumnLayout.tsx
@@ -88,7 +88,11 @@ export const ColumnLayout: React.FC<ColumnLayoutProps> & ColumnExtentions = ({
     }
   });
 
-  const countChildren = React.Children.count(children);
+  // TODO
+  const amountChildren = React.Children.count(children);
+  if (amountChildren > 3) {
+    alert("Layout gets only 3 or lesser children");
+  }
 
   const columns = React.Children.map(children, (child) => {
     if (
@@ -108,7 +112,7 @@ export const ColumnLayout: React.FC<ColumnLayoutProps> & ColumnExtentions = ({
   return (
     <div ref={ref} className="flex">
       <div className="w-full px-2 xl:px-12 column-layout-grid">
-        {countChildren <= 3 ? columns : undefined}
+        {amountChildren <= 3 ? columns : undefined}
       </div>
     </div>
   );