src/components/layouts/ThreeColumn/ColumnLayout.css

@@ -0,0 +1,40 @@
+.left-bar {
+  grid-area: lb;
+  max-width: 300px;
+}
+
+.main-bar {
+  grid-area: main;
+}
+
+.right-bar {
+  grid-area: rb;
+  max-width: 300px;
+}
+
+.column-layout-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "main" "rb";
+}
+
+@media (min-width: 768px) {
+  .right-bar {
+    max-width: 100%;
+  }
+  .column-layout-grid {
+    display: grid;
+    grid-template-columns: minmax(300px, 1fr);
+    grid-template-areas:
+      "lb main"
+      "lb rb";
+  }
+}
+
+@media (min-width: 1280px) {
+  .column-layout-grid {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: "lb main rb";
+  }
+}

src/components/layouts/ThreeColumn/ColumnLayout.tsx

@@ -0,0 +1,123 @@
+import React, {
+  Fragment,
+  useState,
+  useRef,
+  useEffect,
+  FC,
+  isValidElement,
+} from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { BottomSheetModal } from "components/containers/modal/BottomSheetModal";
+import { BottomBarAcceptCookies } from "components/containers/modal/BottomBarAcceptCookies";
+import { Button } from "components/Button/Button";
+import classNames from "classnames";
+import "./ColumnLayout.css";
+import { Children } from "react";
+import MainColumn from "./Maincolumn";
+import LeftColumn from "./LeftColumn";
+import RightColumn from "./RightColumn";
+/* -------------------------------------------------------------------------- */
+/*                    Custom hook to track container width                    */
+/* -------------------------------------------------------------------------- */
+const useScreenWidth = () => {
+  const ref: any = useRef();
+  const [width, setWidth] = useState<null | number>(null);
+
+  const observer = useRef(
+    new ResizeObserver((entries) => {
+      const { width } = entries[0].contentRect;
+      setWidth(width);
+    })
+  );
+
+  useEffect(() => {
+    observer.current.observe(ref.current);
+  }, [ref, observer]);
+
+  return [ref, width];
+};
+
+/* -------------------------------------------------------------------------- */
+/*                            Component extentions                            */
+/* -------------------------------------------------------------------------- */
+
+type ColumnExtentions = {
+  Left: React.FC<{
+    children: React.ReactNode;
+    openLeftBar?: boolean;
+    widthElement?: number;
+    className?: string;
+  }>;
+  Main: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+  }>;
+  Right: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+  }>;
+};
+
+/* -------------------------------------------------------------------------- */
+/*                            Component properties                            */
+/* -------------------------------------------------------------------------- */
+
+type ColumnLayoutProps = {
+  children: React.ReactNode; //Column layout gets as children not more than three children
+} & Omit<React.ComponentPropsWithRef<"div">, "">;
+
+/* -------------------------------------------------------------------------- */
+/*                             Component function                             */
+/* -------------------------------------------------------------------------- */
+export const ColumnLayout: React.FC<ColumnLayoutProps> & ColumnExtentions = ({
+  children,
+}) => {
+  const mdScreen = 768;
+
+  //Hooks
+  const [ref, widthElement] = useScreenWidth(); // to track width of screen
+  const [openLeftBar, setOpenLeftBar] = useState(false); //to open or close left bar
+  function leftBar() {
+    return setOpenLeftBar(!openLeftBar);
+  }
+
+  // Change openLeftBar when width of screen > 768
+  useEffect(() => {
+    if (widthElement > mdScreen) {
+      setOpenLeftBar(false);
+    }
+  });
+
+  // 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 (
+      child &&
+      React.isValidElement(child) &&
+      React.Children.only(child).type === LeftColumn
+    ) {
+      return React.cloneElement(child, {
+        openLeftBar: openLeftBar,
+        widthElement: widthElement,
+      });
+    } else {
+      return child;
+    }
+  });
+
+  return (
+    <div ref={ref} className="flex">
+      <div className="w-full px-2 xl:px-12 column-layout-grid">
+        {amountChildren <= 3 ? columns : undefined}
+      </div>
+    </div>
+  );
+};
+
+ColumnLayout.Left = LeftColumn;
+ColumnLayout.Main = MainColumn;
+ColumnLayout.Right = RightColumn;

src/components/layouts/ThreeColumn/LeftColumn.tsx

@@ -0,0 +1,49 @@
+import React, { Fragment, FunctionComponent as FC } from "react";
+import { Transition } from "@headlessui/react";
+import classNames from "classnames";
+
+type LeftColumnProps = {
+  children: React.ReactNode;
+  openLeftBar?: boolean;
+  widthElement?: number;
+  className?: string;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
+
+const LeftColumn: React.FC<LeftColumnProps> = ({
+  className,
+  children,
+  widthElement = 0,
+  openLeftBar = false,
+}): JSX.Element => {
+  const mdScreen = 768;
+  return (
+    <Transition
+      appear
+      as={Fragment}
+      show={widthElement < mdScreen ? openLeftBar : true}
+      enter={classNames(
+        widthElement < mdScreen ? "ease-in-out duration-150" : "transition-none"
+      )}
+      enterFrom="-translate-x-full"
+      enterTo="translate-x-0"
+      leave="ease-in-out duration-150"
+      leaveFrom="translate-x-0"
+      leaveTo="-translate-x-full"
+    >
+      <div
+        className={classNames(
+          "h-full left-bar",
+          {
+            "fixed inset-0 w-80": widthElement < mdScreen,
+          },
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Transition>
+  );
+};
+
+LeftColumn.displayName = "LeftColumn";
+export default LeftColumn;

src/components/layouts/ThreeColumn/Maincolumn.tsx

@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import React from "react";
+
+type MainColumnProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function MainColumn({ children, className }: MainColumnProps) {
+  return (
+    <div className={classNames("h-full main-bar overflow-auto", className)}>
+      {children}
+    </div>
+  );
+}
+
+export default MainColumn;
+MainColumn.displayName = "MainColumn";

src/components/layouts/ThreeColumn/RightColumn.tsx

@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import React from "react";
+
+type RightColumnProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function RightColumn({ children, className }: RightColumnProps) {
+  return (
+    <div className={classNames("h-full right-bar overflow-auto", className)}>
+      {children}
+    </div>
+  );
+}
+
+export default RightColumn;
+RightColumn.displayName = "RightColumn";