Update

resources/js/modules/editor/partials/edit-sidebar.tsx

@@ -1,4 +1,10 @@
 import { Edit3, Plus, Coins } from "lucide-react"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
 
 interface EditSidebarProps {
   isOpen: boolean
@@ -6,19 +12,19 @@ interface EditSidebarProps {
 }
 
 export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
-  if (!isOpen) return null
-
   return (
-    <div className="fixed left-0 top-0 h-full w-80 bg-white shadow-lg z-50 overflow-y-auto">
-      <div className="p-4">
-        {/* Header */}
-        <div className="flex items-center gap-3 mb-6">
+    <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <SheetContent side="right" className="w-80 overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-3">
             <Edit3 className="h-6 w-6" />
-          <h2 className="text-xl font-semibold">Edit Media</h2>
-        </div>
+            Edit Media
+          </SheetTitle>
+        </SheetHeader>
 
+        <div className="space-y-6">
           {/* Background and Meme Selection */}
-        <div className="grid grid-cols-2 gap-4 mb-6">
+          <div className="grid grid-cols-2 gap-4">
             <div className="border-2 border-gray-300 rounded-lg p-3 text-center">
               <div className="w-full h-16 bg-blue-600 rounded mb-2 overflow-hidden">
                 <img
@@ -46,7 +52,7 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
           </div>
 
           {/* AI Background Search */}
-        <div className="mb-6">
+          <div>
             <h3 className="text-lg font-medium mb-4">Search for backgrounds using AI</h3>
 
             <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center mb-4">
@@ -126,6 +132,7 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
             </div>
           </div>
         </div>
-    </div>
+      </SheetContent>
+    </Sheet>
   )
 }

resources/js/modules/editor/partials/editor-controls.tsx

@@ -15,13 +15,13 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
         <Play className="h-8 w-8 " />
           </Button>
 
-          <Button
+          {/* <Button
         variant="ghost"
         size="icon"
         className="w-12 h-12 rounded-full shadow-sm border "
       >
          <span className="text-sm font-medium ">9:16</span>
-      </Button>
+      </Button> */}
 
 
       <Button