calendar

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>

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;