refactor: split menubar into multiple components

src/components/menubar/FileMenu.tsx

@@ -0,0 +1,35 @@
+import {
+	MenubarContent,
+	MenubarItem,
+	MenubarMenu,
+	MenubarSeparator,
+	MenubarSub,
+	MenubarSubContent,
+	MenubarSubTrigger,
+	MenubarTrigger,
+} from "@/components/ui/menubar";
+
+function FileMenu() {
+	return (
+		<MenubarMenu>
+			<MenubarTrigger>File</MenubarTrigger>
+			<MenubarContent>
+				<MenubarItem>Open Schematic</MenubarItem>
+				<MenubarItem>Open Image</MenubarItem>
+
+				<MenubarSeparator />
+
+				<MenubarSub>
+					<MenubarSubTrigger>Export to...</MenubarSubTrigger>
+					<MenubarSubContent>
+						<MenubarItem>.schematic</MenubarItem>
+						<MenubarItem>.litematic</MenubarItem>
+						<MenubarItem>image</MenubarItem>
+					</MenubarSubContent>
+				</MenubarSub>
+			</MenubarContent>
+		</MenubarMenu>
+	);
+}
+
+export default FileMenu;

src/components/menubar/MoreMenu.tsx

@@ -0,0 +1,15 @@
+import { MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
+import ThemeChanger from "./ThemeChanger";
+
+function MoreMenu() {
+	return (
+		<MenubarMenu>
+			<MenubarTrigger>More</MenubarTrigger>
+			<MenubarContent>
+				<ThemeChanger />
+			</MenubarContent>
+		</MenubarMenu>
+	);
+}
+
+export default MoreMenu;

src/components/menubar/ViewMenu.tsx

@@ -0,0 +1,24 @@
+import { useContext } from "react";
+import { MenubarCheckboxItem, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
+import { SettingsContext } from "@/context/SettingsContext";
+
+function ViewMenu() {
+	const { settings, setSetting } = useContext(SettingsContext);
+
+	const onCheckedChange = (key: keyof Settings) => (value: boolean) => {
+		setSetting(key, value);
+	};
+
+	return (
+		<MenubarMenu>
+			<MenubarTrigger>View</MenubarTrigger>
+			<MenubarContent>
+				<MenubarCheckboxItem checked={settings.grid} onCheckedChange={onCheckedChange("grid")}>
+					Grid
+				</MenubarCheckboxItem>
+			</MenubarContent>
+		</MenubarMenu>
+	);
+}
+
+export default ViewMenu;

src/components/menubar/index.tsx

@@ -1,49 +1,19 @@
-import {
+import { Menubar as UIMenubar } from "@/components/ui/menubar";
-	Menubar as UIMenubar,
-	MenubarContent,
-	MenubarItem,
-	MenubarMenu,
-	MenubarSeparator,
-	MenubarSub,
-	MenubarSubContent,
-	MenubarSubTrigger,
-	MenubarTrigger,
-} from "@/components/ui/menubar";
 
-import ThemeChanger from "./ThemeChanger";
+import FileMenu from "./FileMenu";
+import ViewMenu from "./ViewMenu";
+import MoreMenu from "./MoreMenu";
 
 function Menubar() {
 	return (
 		<UIMenubar className="rounded-none border-t-0 border-x-0 col-span-2">
-			<MenubarMenu>
+			<a href="https://github.com/trafficlunar/blockmatic" className="ml-4 mr-2">
-				<a href="https://github.com/trafficlunar/blockmatic" className="ml-4 mr-2">
+				blockmatic
-					blockmatic
+			</a>
-				</a>
 
-				<MenubarTrigger>File</MenubarTrigger>
+			<FileMenu />
-				<MenubarContent>
+			<ViewMenu />
-					<MenubarItem>Open Schematic</MenubarItem>
+			<MoreMenu />
-					<MenubarItem>Open Image</MenubarItem>
-
-					<MenubarSeparator />
-
-					<MenubarSub>
-						<MenubarSubTrigger>Export to...</MenubarSubTrigger>
-						<MenubarSubContent>
-							<MenubarItem>.schematic</MenubarItem>
-							<MenubarItem>.litematic</MenubarItem>
-							<MenubarItem>image</MenubarItem>
-						</MenubarSubContent>
-					</MenubarSub>
-				</MenubarContent>
-			</MenubarMenu>
-
-			<MenubarMenu>
-				<MenubarTrigger>More</MenubarTrigger>
-				<MenubarContent>
-					<ThemeChanger />
-				</MenubarContent>
-			</MenubarMenu>
 		</UIMenubar>
 	);
 }