51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
|
import ToggleOnOff from "@/components/ToggleOnOff.vue";
|
|
import Todo from "@/components/Todo.vue"
|
|
import BlockedSite from "@/components/BlockedSite.vue"
|
|
const currentMenu = ref("main")
|
|
const menuLists = [
|
|
"main",
|
|
"completed",
|
|
"blocked sites",
|
|
]
|
|
|
|
const changeMenu = (menu: string) => {
|
|
currentMenu.value = menu
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ToggleOnOff />
|
|
<h1>let me focus</h1>
|
|
<ul style="text-align: center;" v-for="menu in menuLists">
|
|
<li>
|
|
<button @click="changeMenu(menu)">[{{ menu }}]</button>
|
|
</li>
|
|
</ul>
|
|
<Todo v-if="currentMenu === 'main'" showInput hoverShowDeleteButton />
|
|
<Todo v-if="currentMenu === 'completed'" showOnlyCompleted showClearAllTodo />
|
|
<BlockedSite v-if="currentMenu === 'blocked sites'" />
|
|
<br/>
|
|
[{{browser.runtime.getManifest().version}}]
|
|
</template>
|
|
|
|
<style scoped>
|
|
ul {
|
|
padding: 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
margin: 0px 5px;
|
|
}
|
|
|
|
li button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.logo {
|
|
height: 6em;
|
|
filter: drop-shadow(0 0 1em #ffffff);
|
|
}
|
|
</style>
|