menu

Author: RafaelGB

src/components/NavBar.tsx

@@ -4,16 +4,20 @@ import MenuIcon from "components/img/MenuIcon";
 import { NavBarProps } from "cdm/MenuBarModel";
 import GlobalFilter from "components/reducers/GlobalFilter";
 import PaginationTable from "components/PaginationTable";
-import { NavBarConfig, StyleVariables } from "helpers/Constants";
+import { InputType, NavBarConfig, StyleVariables } from "helpers/Constants";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import SettingsIcon from "@mui/icons-material/Settings";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+
 import Toolbar from "@mui/material/Toolbar";
 import { c } from "helpers/StylesHelper";
 import Typography from "@mui/material/Typography";
 import DataviewFilters from "components/reducers/DataviewFilters";
+import { SettingsModal } from "Settings";
 
 export function NavBar(navBarProps: NavBarProps) {
   const { table } = navBarProps;
@@ -29,6 +33,28 @@ export function NavBar(navBarProps: NavBarProps) {
     setAnchorEl(event.currentTarget);
   };
 
+  const handleSettingsClick = () => {
+    setAnchorEl(null);
+    new SettingsModal(
+      view,
+      {
+        onSettingsChange: (settings) => {
+          /**
+           * Settings are saved into the database file, so we don't need to do anything here.
+           */
+        },
+      },
+      view.plugin.settings
+    ).open();
+  };
+
+  const handleOpenAsMarkdownClick = () => {
+    setAnchorEl(null);
+    view.plugin.databaseFileModes[(view.leaf as any).id || view.file.path] =
+      InputType.MARKDOWN;
+    view.plugin.setMarkdownView(view.leaf);
+  };
+
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar
@@ -71,7 +97,15 @@ export function NavBar(navBarProps: NavBarProps) {
               "aria-labelledby": "long-button",
             }}
           >
-            <MenuItem>
+            <MenuItem onClick={handleSettingsClick} disableRipple>
+              <SettingsIcon />
+              Settings
+            </MenuItem>
+            <MenuItem onClick={handleOpenAsMarkdownClick} disableRipple>
+              <InsertDriveFileIcon />
+              Open as Markdown
+            </MenuItem>
+            <MenuItem disableRipple>
               {/* CSV buttton download */}
               <CsvButton
                 columns={columns}

src/main.ts

@@ -395,7 +395,6 @@ export default class DBFolderPlugin extends Plugin {
 		);
 	}
 	registerCommands() {
-		// TODO - add command to create a new database
 		this.addCommand({
 			id: 'create-new-database-folder',
 			name: 'Create a new database table',