stort/src/components/HeaderBar/HeaderBar.tsx

import { Box, Button, IconButton, Typography } from "@mui/material";
import { WindowButtons } from "./WindowButtons";
import { BugReport, BugReportOutlined } from "@mui/icons-material";
import { useRouter } from "next/router";
import { Settings } from "./Settings/Settings";

export const HeaderBar = () => {
  const router = useRouter();

  return (
    <Box
      className="titlebar"
      data-tauri-drag-region="true"
      sx={{
        alignItems: "center",
        // TODO: remove when done
        borderBottom: "1px solid red",
        display: "flex",
        flexDirection: "row",
        height: "48px",
        justifyContent: "space-between",
        p: 1,
      }}
    >
      <Box
        className="titlebar"
        data-tauri-drag-region="true"
        sx={{
          alignItems: "center",
          display: "flex",
          flexDirection: "row",
        }}
      >
        hello this is the left side
      </Box>
      <Box
        className="titlebar"
        data-tauri-drag-region="true"
        sx={{
          alignItems: "center",
          display: "flex",
          flexDirection: "row",
        }}
      >
        <IconButton
          onClick={() => {
            router.push("/testing");
          }}
        >
          <BugReportOutlined />
        </IconButton>
        <Settings />
        <WindowButtons />
      </Box>
    </Box>
  );
};