Added side Pannel
This commit is contained in:
@@ -1,25 +1,15 @@
|
||||
"use client";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
import L from "leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import ToastCard from "../toast/ToastCard";
|
||||
import { Toast, ToastBar, Toaster, toast } from "react-hot-toast";
|
||||
import { useMapStore } from "_store/mapStore";
|
||||
import { MapContainer } from "react-leaflet";
|
||||
import { BaseMaps } from "(dispatch)/_components/map/BaseMaps";
|
||||
import { ContextMenu } from "(dispatch)/_components/map/ContextMenu";
|
||||
|
||||
export default () => {
|
||||
export default ({}) => {
|
||||
const { map } = useMapStore();
|
||||
|
||||
return (
|
||||
<MapContainer
|
||||
className="h-full w-full"
|
||||
center={map.center}
|
||||
zoom={map.zoom}
|
||||
scrollWheelZoom={true}
|
||||
>
|
||||
<MapContainer className="flex-1" center={map.center} zoom={map.zoom}>
|
||||
<BaseMaps />
|
||||
<ContextMenu />
|
||||
</MapContainer>
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { usePannelStore } from "_store/pannelStore";
|
||||
|
||||
export const OpenButton = () => {
|
||||
const { setOpen } = usePannelStore();
|
||||
return (
|
||||
<button
|
||||
onClick={() => {
|
||||
setOpen(true);
|
||||
}}
|
||||
className="btn absolute inset-y-0 right-0 z-9999"
|
||||
>
|
||||
Open
|
||||
</button>
|
||||
);
|
||||
};
|
||||
16
apps/dispatch/app/(dispatch)/_components/pannel/Pannel.tsx
Normal file
16
apps/dispatch/app/(dispatch)/_components/pannel/Pannel.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { usePannelStore } from "_store/pannelStore";
|
||||
import { cn } from "helpers/cn";
|
||||
|
||||
export const Pannel = () => {
|
||||
const { isOpen, setOpen } = usePannelStore();
|
||||
return (
|
||||
<div className={cn("flex-1 max-w-[200px] z-9999999")}>
|
||||
<div className="bg-base-100 h-full w-full">
|
||||
<div className="flex justify-between items-center p-4">
|
||||
<h1 className="text-xl font-bold">Pannel</h1>
|
||||
<button onClick={() => setOpen(false)}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,12 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import { OpenButton } from "(dispatch)/_components/pannel/OpenButton";
|
||||
import { Pannel } from "(dispatch)/_components/pannel/Pannel";
|
||||
import { usePannelStore } from "_store/pannelStore";
|
||||
import { cn } from "helpers/cn";
|
||||
import dynamic from "next/dynamic";
|
||||
const Map = dynamic(() => import("./_components/map/Map"), { ssr: false });
|
||||
|
||||
export default () => {
|
||||
const { isOpen } = usePannelStore();
|
||||
return (
|
||||
<div className="relative flex-1">
|
||||
<Map />
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex-1 flex transition-all duration-500 ease",
|
||||
!isOpen && "w-[calc(100%+200px)]",
|
||||
isOpen && "w-[100%]",
|
||||
)}
|
||||
>
|
||||
{/* <MapToastCard2 /> */}
|
||||
<Map>
|
||||
<OpenButton />
|
||||
</Map>
|
||||
<Pannel />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
16
apps/dispatch/app/_store/missionsStore.ts
Normal file
16
apps/dispatch/app/_store/missionsStore.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { create } from "zustand";
|
||||
|
||||
interface Mission {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface MissionStore {
|
||||
missions: Mission[];
|
||||
setMissions: (missions: Mission[]) => void;
|
||||
}
|
||||
|
||||
export const missionsStore = create<MissionStore>((set) => ({
|
||||
missions: [],
|
||||
setMissions: (missions) => set({ missions }),
|
||||
}));
|
||||
11
apps/dispatch/app/_store/pannelStore.ts
Normal file
11
apps/dispatch/app/_store/pannelStore.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { create } from "zustand";
|
||||
|
||||
interface PannelStore {
|
||||
isOpen: boolean;
|
||||
setOpen: (isOpen: boolean) => void;
|
||||
}
|
||||
|
||||
export const usePannelStore = create<PannelStore>((set) => ({
|
||||
isOpen: true,
|
||||
setOpen: (isOpen) => set({ isOpen }),
|
||||
}));
|
||||
@@ -27,7 +27,7 @@ export default async function RootLayout({
|
||||
return (
|
||||
<html lang="de" data-theme="dark">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-screen flex flex-col`}
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-screen flex flex-col overflow-hidden`}
|
||||
>
|
||||
<NextAuthSessionProvider session={session}>
|
||||
{children}
|
||||
|
||||
@@ -13,6 +13,9 @@ export default {
|
||||
background: "var(--background)",
|
||||
foreground: "var(--foreground)",
|
||||
},
|
||||
transitionProperty: {
|
||||
width: "width",
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Config;
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user