From 2fbc0c0875530e426d436a32dd966a8d3f7a8a13 Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Mon, 13 Mar 2023 18:32:01 +0500
Subject: [PATCH] calendar

---
 src/components/aside/Calendar.tsx | 45 ++++++++++++++++---------------
 src/styles/_calendar.scss         |  7 ++++-
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/components/aside/Calendar.tsx b/src/components/aside/Calendar.tsx
index aafdd29..2272d24 100644
--- a/src/components/aside/Calendar.tsx
+++ b/src/components/aside/Calendar.tsx
@@ -14,8 +14,8 @@ const Calendar = () => {
   const [value, onChange] = useState(new Date());
 
   const [data, setData] = useState<any>();
+  const [popup, setPopup] = useState<boolean>(false);
   const ref = useRef<boolean>(false);
-  const popupRef = useRef<HTMLDivElement>(null);
 
   const valueMemo = useMemo(() => ({ value, onChange }), [value, onChange]);
   const dataMemo = useMemo(() => ({ data, setData }), [data, setData]);
@@ -35,34 +35,37 @@ const Calendar = () => {
     if (!ref.current) {
       ref.current = true;
       console.log(dataMemo.data);
+      setPopup(false);
       return;
     }
-    console.log(dataMemo.data);
     api.get(dataMemo.data, dataMemo.setData);
+    setPopup(true);
   }, [value]);
 
   return (
     <div className="calendar">
-      <div className="calendar-popup" ref={popupRef}>
-        {data ? (
-          // data.map((el: any, index: number) => (
-          //   <div className="calendar-popup-item" key={uuiv4()}>
-          //     <p>{el.title}</p>
-          //   </div>
-          // ))
-          data[0] ? (
-            <div className="calendar-popup-item" key={uuiv4()}>
-              <p>{data[0].title}</p>
-            </div>
+      {popup ? (
+        <div className={popup ? 'calendar-popup calendar-popup-active' : 'calendar-popup'}>
+          {data ? (
+            // data.map((el: any, index: number) => (
+            //   <div className="calendar-popup-item" key={uuiv4()}>
+            //     <p>{el.title}</p>
+            //   </div>
+            // ))
+            data[0] ? (
+              <div className="calendar-popup-item" key={uuiv4()}>
+                <p>{data[0].title}</p>
+              </div>
+            ) : (
+              <div className="calendar-popup-item" key={uuiv4()}>
+                <p>Нет событий</p>
+              </div>
+            )
           ) : (
-            <div className="calendar-popup-item" key={uuiv4()}>
-              <p>Нет событий</p>
-            </div>
-          )
-        ) : (
-          <Loader />
-        )}
-      </div>
+            <Loader />
+          )}
+        </div>
+      ) : null}
       <LazyLoadComponent useIntersectionObserver>
         <ReactCalendar value={value} onChange={valueMemo.onChange} />
       </LazyLoadComponent>
diff --git a/src/styles/_calendar.scss b/src/styles/_calendar.scss
index 98996d8..10a3661 100644
--- a/src/styles/_calendar.scss
+++ b/src/styles/_calendar.scss
@@ -110,7 +110,7 @@
 .calendar-popup {
   position: absolute;
   left: 0;
-  top: 0;
+  bottom: -20%;
   background: $main;
   padding: 1.6rem;
   color: $white;
@@ -119,6 +119,7 @@
   flex-direction: column;
   gap: 0.8rem;
   border-radius: 0.8rem;
+  display: none;
 
   .calendar-popup-item {
     font-weight: 400;
@@ -126,6 +127,10 @@
   }
 }
 
+.calendar-popup-active {
+  display: block;
+}
+
 @media (max-width: 1024px) {
   .calendar {
     display: none;