small changes

src/components/Admin.tsx

@@ -1,18 +1,35 @@
-import React, { useState} from 'react';
+import React, { useState, MouseEvent} from 'react';
 import styled from 'styled-components/macro';
 import Plan from '../assets/plan.svg';
 import History from '../assets/history.svg';
 import Statistics from '../assets/statistics.svg';
+import { Scheduler } from './Scheduler';
+import { Rightbar } from './Rightbar';
 
 const LeftSide = styled.div`
   height: 100%;
   display: flex;
+  flex:1;
   flex-direction: column;
   background-color: white;
 `;
 
+const Wrap = styled.div`
+  display: flex;
+  height: calc(100vh - 80px);
+  background-color: #ECEEF4;
+`;
+
+
+const Wrapper = styled.div`
+flex:5;
+  display: flex;
+  height: calc(100vh - 80px);
+  background-color: #ECEEF4;
+`;
+
 interface LeftPanelElement{
-    choose:boolean;
+    isCurrentTab:boolean;
 }
 
 const LeftPanelElement = styled.div<LeftPanelElement>`
@@ -21,10 +38,11 @@ const LeftPanelElement = styled.div<LeftPanelElement>`
   justify-content: center;
   align-items: center;
   flex: 1;
-  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
+  //box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
   padding: 20px;
   cursor: pointer;
-  background-color: ${({choose})=>(choose == true ? `blue` : "")};
+  box-shadow: ${({isCurrentTab})=>(isCurrentTab === true ? `inset 0px 0px 26px 0px rgba(0,0,0,0.55)` : "")};
+  border-bottom:1px solid;
 `;
 const Icon = styled.img`
   width: 40px;
@@ -33,26 +51,32 @@ const Icon = styled.img`
 
 export const Admin = () => {
 
-    const[choose, setChoose] = useState(false);
+    const[currentTab, setCurrentTab] = useState<null|number>(null);
 
-    const handleClick = ()=>{
-        setChoose(true);
+    const handleClick = (e: MouseEvent<HTMLDivElement>)=>{
+      setCurrentTab(Number(e.currentTarget.id));
     }
 
   return (
+    <Wrap>
     <LeftSide>
-      <LeftPanelElement choose={choose} onClick={handleClick}>
+      <LeftPanelElement id={"1"} isCurrentTab={currentTab===1} onClick={handleClick}>
         <Icon alt="profile" src={Plan} />
         Pokaż plan
       </LeftPanelElement>
-      <LeftPanelElement choose={choose} onClick={handleClick}>
+      <LeftPanelElement id={"2"} isCurrentTab={currentTab===2} onClick={handleClick}>
         <Icon alt="history" src={History} />
         Historia Zmian
       </LeftPanelElement>
-      <LeftPanelElement choose={choose} onClick={handleClick}>
+      <LeftPanelElement id={"3"} isCurrentTab={currentTab===3} onClick={handleClick}>
         <Icon alt="statistics" src={Statistics} />
         Statystyki
       </LeftPanelElement>
     </LeftSide>
+    <Wrapper>
+    <Scheduler/>
+    <Rightbar/>
+    </Wrapper>
+    </Wrap>
   );
 };