diff --git a/src/Components/Sidebar/SideCalender.jsx b/src/Components/Sidebar/SideCalender.jsx
new file mode 100644
index 000000000..9a0b60909
--- /dev/null
+++ b/src/Components/Sidebar/SideCalender.jsx
@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react'
+import moment from 'moment'
+import buildCalender from '../../Screens/Calender/build'
+import Header from '../Sidebar/SideCalenderHeader'
+import dayStyles from '../../Screens/Calender/calender-day'
+import './side-calender.css'
+
+const SideCalendar = () => {
+ const [calender, setCalender] = useState([])
+ const [value, setValue] = useState(moment())
+ const [eventtrue, setEventTrue] = useState(false)
+
+ useEffect(() => {
+ setCalender(buildCalender(value))
+ }, [value])
+
+ const handleEventChange = () => {
+ setEventTrue(true)
+ }
+
+ return (
+ <>
+
+
+
+
+
+ {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d) => (
+
{d}
+ ))}
+
+ {calender.map((week) => (
+
+ {week.map((day) => (
+
setValue(day)}
+ >
+
handleEventChange()}>
+ {day.format('D').toString()}
+
+
+ ))}
+
+ ))}
+
+
+
+
+ >
+ )
+}
+
+export default SideCalendar
diff --git a/src/Components/Sidebar/SideCalenderHeader.jsx b/src/Components/Sidebar/SideCalenderHeader.jsx
new file mode 100644
index 000000000..71e86c14a
--- /dev/null
+++ b/src/Components/Sidebar/SideCalenderHeader.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+export default function CalendarHeader ({ value, setValue }) {
+ function currMonthName () {
+ return value.format('MMMM')
+ }
+
+ function currYear () {
+ return value.format('YYYY')
+ }
+
+ function prevMonth () {
+ return value.clone().subtract(1, 'month')
+ }
+
+ function nextMonth () {
+ return value.clone().add(1, 'month')
+ }
+
+ function thisMonth () {
+ return value.isSame(new Date(), 'month')
+ }
+
+ return (
+
+
+
+
+
setValue(prevMonth())}
+ >
+ {String.fromCharCode(171)}
+
+
+ {currMonthName()} {currYear()}
+
+
+
setValue(nextMonth())}>
+ {String.fromCharCode(187)}
+
+
+
+
+
+ )
+}
diff --git a/src/Components/Sidebar/Sidebar.jsx b/src/Components/Sidebar/Sidebar.jsx
index a38a65ffb..6694f8e08 100644
--- a/src/Components/Sidebar/Sidebar.jsx
+++ b/src/Components/Sidebar/Sidebar.jsx
@@ -1,6 +1,7 @@
import { useState } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
import './sidebar.css'
+import SideCalendar from './SideCalender'
const mainnav = [
{
@@ -80,8 +81,9 @@ function MainNav ({ dropdownActive, setDropdownActive }) {
}
return (
-
- {
+ <>
+
+ {
mainnav.map(navitem => {
return (
- 0 ? 'list-items' : 'list-items-menu'} key={navitem.name}>
@@ -121,6 +123,9 @@ function MainNav ({ dropdownActive, setDropdownActive }) {
)
})
}
-
+
+ {/* */}
+
+ >
)
}
diff --git a/src/Components/Sidebar/side-calender.css b/src/Components/Sidebar/side-calender.css
new file mode 100644
index 000000000..0e17eeb74
--- /dev/null
+++ b/src/Components/Sidebar/side-calender.css
@@ -0,0 +1,119 @@
+.calendar-side {
+ box-sizing: border-box;
+ font-size: 1rem;
+ max-width: 400px;
+ position: fixed;
+ left: 0;
+ bottom: 0;
+}
+
+.header-side {
+ background-color: #2b2b2c;
+ text-align: center;
+ line-height: 29px;
+ color: white;
+ font-weight: 300;
+ height: 30px;
+ font-size: 17px;
+}
+
+.day-names-side {
+ display: flex;
+ flex-wrap: wrap;
+ width: 195px;
+ margin: 0 auto;
+ align-items: center;
+ color: white;
+}
+
+.week-side {
+ background-color: #141414;
+ width: calc(100% / 7);
+ height: 44px;
+ line-height: 44px;
+ text-align: center;
+ color: rgb((172), 167, 167);
+ font-weight: 300;
+}
+
+.week-side div {
+ width: 100%;
+}
+
+.day-side {
+ position: relative;
+ width: calc(100% / 7);
+ height: 44px;
+ display: inline-block;
+ background-color: black;
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ z-index: 1;
+ text-align: center;
+ color: white;
+ border: 1px solid rgb(22, 21, 21);
+ line-height: 2;
+ font-size: 14px;
+}
+
+.calender-month-wrapper-side {
+ display: flex;
+}
+
+.calender-header-container-side {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.today-side {
+ background-color: rgb(64, 95, 80);
+ height: 27px;
+ width: 27px;
+ border-radius: 5px;
+ margin-top: 5px;
+}
+
+.before-side {
+ color: white;
+ background-color: rgb(12, 11, 11);
+ height: 27px;
+ width: 27px;
+ border-radius: 5px;
+ margin-top: 5px;
+}
+
+.previous-side {
+ text-align: left;
+ margin-left: 1rem;
+ margin-right: 25px;
+ color: rgba(0, 198, 136, 1);
+ cursor: pointer;
+}
+
+.next-side {
+ margin-left: 36px;
+ color: rgba(0, 198, 136, 1);
+ cursor: pointer;
+}
+
+.button-sidebar {
+ background-color: #00c688;
+ border: none;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ width: 100%;
+}
+
+.selected-side {
+ background-color: rgba(0, 198, 136, 1);
+ color: white;
+ font-weight: bold;
+ height: 27px;
+ width: 30px;
+}
diff --git a/src/Screens/Calender/Calender.jsx b/src/Screens/Calender/Calender.jsx
index 8b7ad33eb..9a2ad6cf4 100644
--- a/src/Screens/Calender/Calender.jsx
+++ b/src/Screens/Calender/Calender.jsx
@@ -24,8 +24,6 @@ const Calender = () => {
dispatch(listCalenderEvents())
}, [dispatch])
- console.log('evet', eventtrue)
-
const handleEventChange = () => {
setEventTrue(true)
}