feat: update layout, add copy key

src/components/containers/sidebar.tsx

@@ -45,7 +45,7 @@ const Sidebar = () => {
                 className={cn(
                   "h-12 flex items-center px-6",
                   isActive &&
-                    "bg-primary text-primary-content hover:bg-primary/60 focus:bg-primary"
+                    "bg-primary text-primary-content hover:bg-primary/60 focus:bg-primary focus:text-primary-content"
                 )}
               >
                 <page.icon size={18} />

src/components/layouts/main-layout.tsx

@@ -45,29 +45,33 @@ const Header = ({ onSidebarOpen }: HeaderProps) => {
   const navigate = useNavigate();
 
   return (
-    <header className="bg-base-100 px-4 h-16 md:px-8 md:h-20 flex flex-row items-center gap-4">
-      {page?.prev ? (
-        <Button
-          href={page.prev}
-          onClick={() => navigate(page.prev!, { replace: true })}
-          color="ghost"
-          shape="circle"
-          className="-mx-2"
-        >
-          <ArrowLeft />
-        </Button>
-      ) : (
-        <Button
-          icon={MenuIcon}
-          color="ghost"
-          className="md:hidden -mx-2"
-          onClick={onSidebarOpen}
-        />
-      )}
+    <header className="bg-base-100 px-4 md:px-8">
+      <div className="container h-16 md:h-20 flex flex-row items-center gap-4">
+        {page?.prev ? (
+          <Button
+            href={page.prev}
+            onClick={() => navigate(page.prev!, { replace: true })}
+            color="ghost"
+            shape="circle"
+            className="-mx-2"
+          >
+            <ArrowLeft />
+          </Button>
+        ) : (
+          <Button
+            icon={MenuIcon}
+            color="ghost"
+            className="md:hidden -mx-2"
+            onClick={onSidebarOpen}
+          />
+        )}
 
-      <h1 className="text-xl flex-1 truncate">{page?.title || "Dashboard"}</h1>
+        <h1 className="text-xl flex-1 truncate">
+          {page?.title || "Dashboard"}
+        </h1>
 
-      {page?.actions}
+        {page?.actions}
+      </div>
     </header>
   );
 };

src/components/ui/toggle.tsx

@@ -42,7 +42,13 @@ export const ToggleField = <T extends FieldValues>({
       title={title}
       className={className}
       render={(field) => (
-        <Toggle {...props} {...field} className={inputClassName} />
+        <Toggle
+          {...props}
+          {...field}
+          className={inputClassName}
+          checked={field.value || false}
+          onChange={(e) => field.onChange(e.target.checked)}
+        />
       )}
     />
   );