Added side Pannel

This commit is contained in:
PxlLoewe
2025-03-25 00:19:08 -07:00
parent c956fb253b
commit 6b09e3380e
9 changed files with 81 additions and 15 deletions

View File

@@ -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>

View File

@@ -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>
);
};

View 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>
);
};

View File

@@ -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>
);
};

View 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 }),
}));

View 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 }),
}));

View File

@@ -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}

View File

@@ -13,6 +13,9 @@ export default {
background: "var(--background)",
foreground: "var(--foreground)",
},
transitionProperty: {
width: "width",
},
},
},
} satisfies Config;

Binary file not shown.