From fa308f11d15e8b71b6a276adb7509ca9563e1f74 Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Mon, 22 Aug 2022 17:49:17 +0300
Subject: [PATCH] Created column schemd
---
.../layouts/ThreeColumn/ColumnLayout.css | 35 +++++++
.../layouts/ThreeColumn/ColumnLayout.tsx | 95 +++++++++++++++++++
2 files changed, 130 insertions(+)
create mode 100644 src/components/layouts/ThreeColumn/ColumnLayout.css
create mode 100644 src/components/layouts/ThreeColumn/ColumnLayout.tsx
diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.css b/src/components/layouts/ThreeColumn/ColumnLayout.css
new file mode 100644
index 0000000..7ad8bb3
--- /dev/null
+++ b/src/components/layouts/ThreeColumn/ColumnLayout.css
@@ -0,0 +1,35 @@
+.left-bar {
+ grid-area: lb;
+}
+
+.main-bar {
+ grid-area: main;
+}
+
+.right-bar {
+ grid-area: rb;
+}
+
+.column-layout-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-areas: "main" "rb";
+}
+
+@media (min-width: 768px) {
+ .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: 300px 1fr 300px;
+ grid-template-areas: "lb main rb";
+ }
+}
diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.tsx b/src/components/layouts/ThreeColumn/ColumnLayout.tsx
new file mode 100644
index 0000000..ddd3d1a
--- /dev/null
+++ b/src/components/layouts/ThreeColumn/ColumnLayout.tsx
@@ -0,0 +1,95 @@
+import React, { Fragment, useState, useRef, useEffect } 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 { container } from "webpack";
+
+/* -------------------------------------------------------------------------- */
+/* 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 properties */
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------------------------------------------------------- */
+/* Component function */
+/* -------------------------------------------------------------------------- */
+export function ColumnLayout() {
+ 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);
+ }
+ });
+
+ return (
+ <div ref={ref} className="w-full px-2 xl:px-12 column-layout-grid">
+ <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 bg-blue-600 left-bar", {
+ "fixed inset-0 w-80": widthElement < mdScreen,
+ })}
+ >
+ ffadfag
+ </div>
+ </Transition>
+
+ <div className="text-gray-900 bg-blue-200 h-full main-bar">
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ad,
+ autem quas hic architecto iusto maxime veritatis laborum. Quas ducimus
+ sequi impedit harum tempora est nesciunt porro assumenda animi
+ temporibus?
+ <div className="h-96 bg-blue-100"></div>
+ <div className="h-96 bg-blue-400"></div>
+ <div className="h-96 bg-blue-700"></div>
+ <div className="h-96 bg-blue-100"></div>
+ <div className="h-96 bg-blue-200"></div>
+ <div className="h-96 bg-blue-800"></div>
+ </div>
+ <div className="h-full bg-blue-400 right-bar">dflajdfjlj</div>
+ </div>
+ );
+}