src/components/Layouts/LeftSidebar.jsx

@@ -10,6 +10,8 @@ import {
 } from "lucide-react";
 import { useContext } from "react";
 import CanvasContext from "../Context/canvasContext/CanvasContext";
+import { useParams } from "react-router-dom";
+import { useToast } from "@/hooks/use-toast";
 
 const sidebarItems = [
   { id: "design", icon: Text, label: "Design" },
@@ -23,6 +25,25 @@ const sidebarItems = [
 
 export function Sidebar() {
   const { selectedPanel, setSelectedPanel } = useContext(CanvasContext);
+
+  const params = useParams();
+  const { id } = params;
+
+  const { toast } = useToast();
+
+  const handleSelectedPanel = (panelId) => {
+    if (panelId === "project" && id) {
+      toast({
+        title: "Unsaved Project",
+        description: "Please save the project first, or delete it. If you don't want to save it.",
+        variant: "destructive",
+      })
+    }
+    else {
+      setSelectedPanel(panelId);
+    }
+  }
+
   return (
     <div className="w-full xl:w-20 lg:w-20 md:w-20 sm:w-20 border-r bg-background flex xl:flex-col lg:flex-col md:flex-col sm:flex-col items-center justify-center py-4 gap-6 md:pt-16 xl:pt-0 h-full overflow-x-scroll">
       {sidebarItems.map((item) => {
@@ -31,7 +52,7 @@ export function Sidebar() {
           <button
             key={item.id}
             onClick={() => {
-              setSelectedPanel(item.id);
+              handleSelectedPanel(item.id);
             }}
             className={cn(
               "flex flex-col items-center gap-1 p-2 rounded-lg w-16 hover:bg-accent",