From b7276fd6e30e232cca9e1855270550d7511620d1 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 12 Mar 2021 17:51:14 +0700
Subject: [PATCH] #23 fixed lab frames with header

---
 src/components/lab/LabHead/index.tsx   | 32 ++++++++++++++++++++++++++
 src/components/main/Header/index.tsx   | 14 +++++------
 src/containers/lab/LabLayout/index.tsx | 29 ++++++++++++++++++++---
 3 files changed, 65 insertions(+), 10 deletions(-)
 create mode 100644 src/components/lab/LabHead/index.tsx

diff --git a/src/components/lab/LabHead/index.tsx b/src/components/lab/LabHead/index.tsx
new file mode 100644
index 00000000..25fb6cfd
--- /dev/null
+++ b/src/components/lab/LabHead/index.tsx
@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import { Group } from '~/components/containers/Group';
+import { Card } from '~/components/containers/Card';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { Filler } from '~/components/containers/Filler';
+
+interface IProps {}
+
+const LabHead: FC<IProps> = () => (
+  <Card>
+    <Group horizontal>
+      <Group horizontal style={{ flex: '0 0 auto' }}>
+        <Placeholder width="32px" height={32} />
+        <Placeholder width="96px" height={18} />
+      </Group>
+
+      <Group horizontal style={{ flex: '0 0 auto' }}>
+        <Placeholder width="32px" height={32} />
+        <Placeholder width="126px" height={18} />
+      </Group>
+
+      <Group horizontal style={{ flex: '0 0 auto' }}>
+        <Placeholder width="32px" height={32} />
+        <Placeholder width="96px" height={18} />
+      </Group>
+
+      <Filler />
+    </Group>
+  </Card>
+);
+
+export { LabHead };
diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx
index 69d0dee4..8f1db775 100644
--- a/src/components/main/Header/index.tsx
+++ b/src/components/main/Header/index.tsx
@@ -82,6 +82,13 @@ const HeaderUnconnected: FC<IProps> = memo(
           <Filler />
 
           <div className={styles.plugs}>
+            <Link
+              className={classNames(styles.item, { [styles.is_active]: pathname === URLS.BASE })}
+              to={URLS.BASE}
+            >
+              ФЛОУ
+            </Link>
+
             {is_user && (
               <Link
                 className={classNames(styles.item, { [styles.is_active]: pathname === URLS.BASE })}
@@ -91,13 +98,6 @@ const HeaderUnconnected: FC<IProps> = memo(
               </Link>
             )}
 
-            <Link
-              className={classNames(styles.item, { [styles.is_active]: pathname === URLS.BASE })}
-              to={URLS.BASE}
-            >
-              ФЛОУ
-            </Link>
-
             <Link
               className={classNames(styles.item, {
                 [styles.is_active]: pathname === URLS.BORIS,
diff --git a/src/containers/lab/LabLayout/index.tsx b/src/containers/lab/LabLayout/index.tsx
index 020df216..df778d28 100644
--- a/src/containers/lab/LabLayout/index.tsx
+++ b/src/containers/lab/LabLayout/index.tsx
@@ -11,6 +11,8 @@ import { Grid } from '~/components/containers/Grid';
 import { Group } from '~/components/containers/Group';
 import { LabHero } from '~/components/lab/LabHero';
 import { LabBanner } from '~/components/lab/LabBanner';
+import { LabHead } from '~/components/lab/LabHead';
+import { Filler } from '~/components/containers/Filler';
 
 interface IProps {}
 
@@ -25,9 +27,11 @@ const LabLayout: FC<IProps> = () => {
     <div>
       <Container>
         <div className={styles.wrap}>
-          <div className={styles.content}>
+          <Group className={styles.content}>
+            <LabHead />
             <LabGrid />
-          </div>
+          </Group>
+
           <div className={styles.panel}>
             <Sticky>
               <Group>
@@ -35,8 +39,13 @@ const LabLayout: FC<IProps> = () => {
 
                 <Card>
                   <Group>
-                    <Placeholder height={32} width="100%" />
+                    <Placeholder height={36} width="100%" />
+                    <Group horizontal>
+                      <Filler />
+                      <Placeholder height={32} width="120px" />
+                    </Group>
 
+                    <div />
                     <div />
 
                     <Placeholder height={14} width="100px" />
@@ -52,6 +61,7 @@ const LabLayout: FC<IProps> = () => {
                       <Placeholder height={20} width="64px" />
                     </div>
 
+                    <div />
                     <div />
 
                     <Placeholder height={14} width="180px" />
@@ -75,6 +85,19 @@ const LabLayout: FC<IProps> = () => {
                     </Group>
 
                     <div />
+                    <div />
+
+                    <Group>
+                      <Placeholder width="100%" height={100} />
+                      <Placeholder width="120px" height={16} />
+                    </Group>
+
+                    <div />
+
+                    <Group>
+                      <Placeholder width="100%" height={100} />
+                      <Placeholder width="120px" height={16} />
+                    </Group>
                   </Group>
                 </Card>
               </Group>