<!-- 分栏布局 -->
<template>
    <div class="layout-column" :class="appStore.isOpen ? '' : 'layout-column-fold'">
        <!-- 左 -->
        <div class="nav-left">
            <!-- 分栏 - 顶级导航栏 -->
            <nav-cmb-left class="nav-cmb-left"></nav-cmb-left>
            <!-- 分栏 - 次级导航栏 -->
            <transition name="left-jump-right">
                <nav-cmb-right class="nav-cmb-right" v-if="appStore.isOpen"></nav-cmb-right>
            </transition>
        </div>
        <!-- 右 -->
        <div class="nav-right">
            <!-- 工具栏 -->
            <nav-tool-bar class="nav-right-1"></nav-tool-bar>
            <!-- Tab栏 -->
            <nav-tab-bar class="nav-right-2"></nav-tab-bar>
            <!-- 视图容器 -->
            <nav-view-vessel class="nav-right-3"></nav-view-vessel>
        </div>
    </div>
</template>

<script setup name="layout-column">

import NavCmbLeft from './nav-column/nav-cmb-left';		// 顶级菜单栏
import NavCmbRight from './nav-column/nav-cmb-right';		// 次级菜单栏
import NavToolBar from './../nav/nav-tool-bar';		// 工具栏
import NavTabBar from './../nav/nav-tab-bar';		// tab栏
import NavViewVessel from './../nav/nav-view-vessel';	// 视图容器
import {useAppStore} from "../../store/app";
const appStore = useAppStore();

</script>

<style scoped lang="scss">
  .layout-column{
    --nav-left-width: 264px;
  }
  .nav-left{
    box-sizing: border-box;
    border-right: 1px #DDD solid;
    background-color: #FFF !important;
  }

  .nav-cmb-left{
    position: absolute;
    z-index: 60;
    left: 0;
    width: var(--nav-left-width-fold);
    height: 100%;
    box-sizing: border-box;
    background-color: var(--menu-bg-color);
  }
  .nav-cmb-right{
    position: absolute;
    z-index: 50;
    left: var(--nav-left-width-fold);
    width: calc(var(--nav-left-width) - var(--nav-left-width-fold));
    height: 100%;
  }

  // 折叠时
  .layout-column.layout-column-fold{
    .nav-left{
      width: 64px;
      overflow: hidden;
    }
    .nav-right{
      width: calc(100% - 64px);
    }
  }

</style>
