49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { Icon } from "@iconify/react";
|
|
import { MiniCalendar } from "../calendar/MiniCalendar";
|
|
import { SearchBar } from "../search/SearchBar";
|
|
import { TagsFilter } from "../search/TagsFilter";
|
|
import { useAppSelector } from "../../store/hooks";
|
|
|
|
interface MobileSidebarProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const MobileSidebar: React.FC<MobileSidebarProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
}) => {
|
|
const allNotes = useAppSelector((state) => state.notes.allNotes);
|
|
|
|
return (
|
|
<>
|
|
{/* Оверлей */}
|
|
<div
|
|
className={`mobile-sidebar-overlay ${isOpen ? "open" : ""}`}
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Сайдбар */}
|
|
<div className={`mobile-sidebar ${isOpen ? "open" : ""}`}>
|
|
<button className="sidebar-close-btn" onClick={onClose}>
|
|
<Icon icon="mdi:close" />
|
|
</button>
|
|
<div className="sidebar-content">
|
|
<div className="mobile-calendar-section">
|
|
<MiniCalendar notes={allNotes} />
|
|
</div>
|
|
|
|
<div className="mobile-search-section">
|
|
<SearchBar />
|
|
</div>
|
|
|
|
<div className="mobile-tags-section">
|
|
<TagsFilter notes={allNotes} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|