90 lines
1.4 KiB
Vue
90 lines
1.4 KiB
Vue
<template>
|
|
<button id="titlebar" />
|
|
<span id="menu">
|
|
<button
|
|
class="menuButton exitButton"
|
|
@click.prevent="postNavBarExit"
|
|
/>
|
|
<button
|
|
class="menuButton minimizeButton"
|
|
@click.prevent="postNavBarMin"
|
|
/>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
|
|
// import { postNavBarExit, postNavBarMin } from "@/render/ipc";
|
|
import { defineComponent } from "vue";
|
|
import { postNavBar } from "@/render/ipc";
|
|
|
|
export default defineComponent({
|
|
name: "Header",
|
|
setup() {
|
|
const postNavBarExit = () => postNavBar('close');
|
|
const postNavBarMin = () => postNavBar('min');
|
|
return {
|
|
postNavBarExit,
|
|
postNavBarMin
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#titlebar {
|
|
position: fixed;
|
|
|
|
width: 100vw;
|
|
height: 54px;
|
|
|
|
opacity: 0.75;
|
|
|
|
background-color: #EBEBEB;
|
|
|
|
-webkit-app-region: drag;
|
|
|
|
border: none;
|
|
outline: none;
|
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
#menu {
|
|
position: fixed;
|
|
margin-left: 20px;
|
|
margin-top: 20px;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
.menuButton {
|
|
border: none;
|
|
outline:none;
|
|
min-width: 14px;
|
|
min-height: 14px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.exitButton {
|
|
background-color: #FF6157;
|
|
}
|
|
|
|
.exitButton:active {
|
|
background: #c14645;
|
|
}
|
|
|
|
.minimizeButton {
|
|
background-color: #FFC12F;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.minimizeButton:active {
|
|
background-color: #c08e38;
|
|
}
|
|
</style>
|