header bar window buttons

package.json

@@ -14,6 +14,7 @@
     "@emotion/react": "^11.13.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.16.5",
     "@tauri-apps/api": "^1.6.0",
     "next": "14.2.5",

src-tauri/Cargo.toml

@@ -17,7 +17,7 @@ tauri-build = { version = "1.5.3", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.7.0", features = [ "notification-all", "dialog-all"] }
+tauri = { version = "1.7.0", features = [ "window-all", "process-all", "notification-all", "dialog-all"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

src-tauri/tauri.conf.json

@@ -22,6 +22,12 @@
       },
       "notification": {
         "all": true
+      },
+      "process": {
+        "all": true
+      },
+      "window": {
+        "all": true
       }
     },
     "bundle": {

src/components/HeaderBar.tsx

@@ -1,19 +0,0 @@
-import { AppBar, Box, Toolbar } from "@mui/material";
-
-export const HeaderBar = () => {
-  return (
-    <AppBar position="static">
-      <Toolbar
-        disableGutters
-        sx={{
-          height: "64px",
-          p: 1,
-        }}
-      >
-        hello this is the left side
-        <Box sx={{ flexGrow: 1 }} />
-        hello this is the right side
-      </Toolbar>
-    </AppBar>
-  );
-};

src/components/HeaderBar/HeaderBar.tsx

@@ -0,0 +1,25 @@
+import { Box, Button, Typography } from "@mui/material";
+import { WindowButtons } from "./WindowButtons";
+
+export const HeaderBar = () => {
+  const test = async () => {
+    console.log("hello");
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        height: "64px",
+        p: 1,
+      }}
+    >
+      hello this is the left side
+      <Box sx={{ flexGrow: 1 }} />
+      <Typography>hello this is the right side |</Typography>
+      <Button onClick={test}>Relaunch</Button>
+      <WindowButtons />
+    </Box>
+  );
+};

src/components/HeaderBar/WindowButtons.tsx

@@ -0,0 +1,57 @@
+import { Close, CloseFullscreen, Minimize } from "@mui/icons-material";
+import { Box, Button, ButtonGroup, Stack, useTheme } from "@mui/material";
+import { appWindow } from "@tauri-apps/api/window";
+
+export const WindowButtons = () => {
+  const userTheme = useTheme();
+
+  const minimize = () => {
+    appWindow.minimize();
+  };
+
+  const maximize = () => {
+    appWindow.toggleMaximize();
+  };
+
+  const close = () => {
+    appWindow.close();
+  };
+
+  return (
+    <Box>
+      <Stack direction="row" spacing={1}>
+        <ButtonGroup>
+          <Button
+            onClick={minimize}
+            sx={{
+              backgroundColor: userTheme.palette.grey[800],
+            }}
+          >
+            <Minimize
+              fontSize="inherit"
+              sx={{
+                backgroundColor: userTheme.palette.grey[800],
+              }}
+            />
+          </Button>
+          <Button
+            onClick={maximize}
+            sx={{
+              backgroundColor: userTheme.palette.grey[800],
+            }}
+          >
+            <CloseFullscreen fontSize="inherit" />
+          </Button>
+          <Button
+            onClick={close}
+            sx={{
+              backgroundColor: userTheme.palette.grey[800],
+            }}
+          >
+            <Close fontSize="inherit" />
+          </Button>
+        </ButtonGroup>
+      </Stack>
+    </Box>
+  );
+};

src/pages/index.tsx

@@ -12,7 +12,7 @@ import {
   sendNotification,
 } from "@tauri-apps/api/notification";
 import { useState } from "react";
-import { HeaderBar } from "../components/HeaderBar";
+import { HeaderBar } from "../components/HeaderBar/HeaderBar";
 
 export default function Home() {
   const [content, setContent] = useState("Please enter your name");