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,15 +35,17 @@ 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}>
+      {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()}>
@@ -63,6 +65,7 @@ const Calendar = () => {
             <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;