<!-- 右边第一行，工具栏 -->
<template>
    <div>
        <div class="tools-left">
            <NavToolFold></NavToolFold>
            <NavToolRefresh v-if="themeStore.isShowRefresh"></NavToolRefresh>
            <NavToolDatetime v-if="themeStore.isShowDateTime"></NavToolDatetime>
            <NavToolBreadcrumb v-if="themeStore.isShowBreadcrumb"></NavToolBreadcrumb>
        </div>
        <div class="tools-right">
            <NavToolUser></NavToolUser>
            <NavToolNote></NavToolNote>
            <NavToolSearch></NavToolSearch>
            <NavToolScreen></NavToolScreen>
            <NavToolSetting></NavToolSetting>
        </div>
    </div>
</template>

<script setup name="nav-tool-bar">
import NavToolFold from './nav-tools/nav-tool-fold';
import NavToolSearch from './nav-tools/nav-tool-search';
import NavToolRefresh from './nav-tools/nav-tool-refresh';
import NavToolDatetime from './nav-tools/nav-tool-datetime';
import NavToolBreadcrumb from './nav-tools/nav-tool-breadcrumb';

import NavToolUser from './nav-tools/nav-tool-user';
import NavToolNote from './nav-tools/nav-tool-note';
import NavToolScreen from './nav-tools/nav-tool-screen';
import NavToolSetting from './nav-tools/nav-tool-setting';

import {useThemeStore} from "../../store/theme";
const themeStore = useThemeStore();

</script>

<style scoped lang="scss">

.tools-left{border: 0px #000 solid; float: left;}
.tools-right{float: right;}

:deep(.tool-fox) {padding: 0 1em; display: inline-block; cursor: pointer;}
:deep(.tool-fox i, .tool-fox svg) {transition: all 0.2s; font-size: 18px; vertical-align: middle;}
:deep(.tool-fox:hover) {
    background-color: var(--tool-hover-bg-color);
}

/*800之下*/
@media(max-width: 800px) {
    .tools-right{display: none;}
}
</style>
