diff --git a/src/assets/history.svg b/src/assets/history.svg
new file mode 100644
index 0000000..6067461
--- /dev/null
+++ b/src/assets/history.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/plan.svg b/src/assets/plan.svg
new file mode 100644
index 0000000..833682d
--- /dev/null
+++ b/src/assets/plan.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/statistics.svg b/src/assets/statistics.svg
new file mode 100644
index 0000000..2d88ded
--- /dev/null
+++ b/src/assets/statistics.svg
@@ -0,0 +1,53 @@
+
+
+
diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx
new file mode 100644
index 0000000..afc646e
--- /dev/null
+++ b/src/components/Admin.tsx
@@ -0,0 +1,58 @@
+import React, { useState} 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';
+
+const LeftSide = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+`;
+
+interface LeftPanelElement{
+ choose:boolean;
+}
+
+const LeftPanelElement = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+ box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
+ padding: 20px;
+ cursor: pointer;
+ background-color: ${({choose})=>(choose == true ? `blue` : "")};
+`;
+const Icon = styled.img`
+ width: 40px;
+ margin: 5px;
+`;
+
+export const Admin = () => {
+
+ const[choose, setChoose] = useState(false);
+
+ const handleClick = ()=>{
+ setChoose(true);
+ }
+
+ return (
+
+
+
+ Pokaż plan
+
+
+
+ Historia Zmian
+
+
+
+ Statystyki
+
+
+ );
+};
diff --git a/src/components/App.tsx b/src/components/App.tsx
index ff473d8..9557e6f 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,5 +1,6 @@
import React, { useState, useContext } from 'react';
import Topbar from './Topbar';
+import {Admin} from './Admin';
import { Transfer } from './Transfer';
import { Scheduler } from './Scheduler';
import { Rightbar } from './Rightbar';
@@ -9,7 +10,6 @@ const Wrapper = styled.div`
display: flex;
height: calc(100vh - 80px);
background-color: #ECEEF4;
- padding: 20px;
`;
export const App = () => {
@@ -24,8 +24,9 @@ export const App = () => {
-
-
+
+ {/*
+ */}
);
diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx
index 2f7d7da..8ffdd93 100644
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -11,6 +11,7 @@ const SchedulerWrapper = styled.div`
padding: 10px 40px 25px 10px;
border-radius: 5px;
margin-right: 20px;
+ margin-left:20px;
flex-direction: column;
justify-content: center;
align-items: center;
diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
index a7789ff..295cb5e 100644
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@@ -1,6 +1,4 @@
import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react';
-import Transfer from '../assets/transfer.png';
-import Search from '../assets/search.svg';
import { ReactComponent as Close } from '../assets/close.svg';
import ProfileIcon from '../assets/account.svg';
import { Profile } from './Profile';
@@ -103,10 +101,6 @@ const Icon = styled.img`
}
`;
-
-
-
-
interface TopbarProps {
handleTransfer: (e: MouseEvent) => void;
}