60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { Grid, Layout } from "antd";
|
|
import PageContent from "../PageContent";
|
|
import SideMenuDesktop from "../SideMenu/Desktop";
|
|
import SideMenuMobile from "../SideMenu/Mobile";
|
|
import { SideMenuContent, SideMenuEditorContent } from "../SideMenu";
|
|
import { useEffect } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { setIsSideMenuCollapsed } from "../SideMenu/sideMenuSlice";
|
|
import { editorActive } from "../../../features/Lessons/LessonPageEditor/lessonPageEditorSlice";
|
|
import MyDndContext from "./MyDndContext";
|
|
|
|
|
|
const { useBreakpoint } = Grid;
|
|
|
|
export function SideMenu() {
|
|
const screenBreakpoint = useBreakpoint();
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const isEditorActive = useSelector(editorActive);
|
|
|
|
console.log("isEditorActive", isEditorActive);
|
|
|
|
const Content = () => {
|
|
return isEditorActive ? <SideMenuEditorContent /> : <SideMenuContent />;
|
|
};
|
|
|
|
useEffect(() => {
|
|
dispatch(setIsSideMenuCollapsed(!screenBreakpoint.lg));
|
|
}, [screenBreakpoint]);
|
|
|
|
return (
|
|
<>
|
|
{screenBreakpoint.lg ? (
|
|
<SideMenuDesktop>
|
|
<Content />
|
|
</SideMenuDesktop>
|
|
) : (
|
|
<SideMenuMobile>
|
|
<Content />
|
|
</SideMenuMobile>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function DashboardLayout() {
|
|
return (
|
|
<MyDndContext>
|
|
<Layout style={{ minHeight: "100vh" }}>
|
|
<Layout>
|
|
<SideMenu />
|
|
|
|
<PageContent />
|
|
</Layout>
|
|
</Layout>
|
|
</MyDndContext>
|
|
);
|
|
}
|