[Update] Add Window Title bar.

[bugfix] Note: I think this is tauri's bug. When I try to resize the window and hovered dragable area, I could see resize cursor but it work as a dragging the window behavior that should't be.
Updated npm packages but still not work so I  managed it as adding margin-top by referring Discord title bar.
This commit is contained in:
Sakamoto Shiina
2024-10-09 22:00:30 +09:00
parent 98d57bdc13
commit 61f50215d7
16 changed files with 797 additions and 740 deletions

View File

@@ -0,0 +1,50 @@
// import clsx from "clsx";
import styles from "./WindowTitleBar.module.scss";
import XMarkSvg from "@images/cancel.svg?react";
import SquareSvg from "@images/square.svg?react";
import LineSvg from "@images/line.svg?react";
import VrctSvg from "@images/vrct.svg?react";
import { appWindow } from "@tauri-apps/api/window";
export const WindowTitleBar = () => {
const minimize = () => {
appWindow.minimize();
};
const maximize = async () => {
const maximizeState = await appWindow.isMaximized();
if (!maximizeState) {
appWindow.maximize();
} else {
appWindow.unmaximize();
}
};
const close = () => {
appWindow.close();
};
return (
<div className={styles.container}>
<div className={styles.wrapper} data-tauri-drag-region>
<div className={styles.title_wrapper}>
<VrctSvg className={styles.title_svg}/>
</div>
<div className={styles.window_control_wrapper}>
<div className={styles.minimize_button} onClick={minimize}>
<LineSvg className={styles.line_svg}/>
</div>
<div className={styles.maximize_button} onClick={maximize}>
<SquareSvg className={styles.square_svg}/>
</div>
<div className={styles.close_button} onClick={close}>
<XMarkSvg className={styles.x_mark_svg}/>
</div>
</div>
</div>
</div>
);
};