<template>
  <div class="base-layout">
    <!-- 顶部导航栏 -->
    <div class="base-layout__topbar"></div>

    <!-- 主体区域 -->
    <div class="base-layout__main">
      <!-- 侧边栏 -->
      <div class="base-layout__sidebar">
        <!-- 侧边栏内容 -->
        <div class="base-layout__sidebar-content"></div>
        <!-- 侧边栏底部固定区域 -->
        <div class="base-layout__sidebar-bottom">
          <div class="base-layout__sidebar-bottom-inner">
            <UserBar />
          </div>
        </div>
        <!-- 拖拽调整宽度的手柄 -->
        <div class="base-layout__resize-handle"></div>
      </div>

      <!-- 主内容区域 -->
      <div class="base-layout__content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import UserBar from '@/components/User/UserBar.vue'
</script>

<style scoped lang="scss">
.base-layout {
  display: flex;
  flex-direction: column;
  height: 100lvh;
  width: 100lvw;
  overflow: hidden;
}

.base-layout__topbar {
  display: flex;
  width: 100%;
  height: 30px;
  background-color: #fde68a; // amber-200
}

.base-layout__main {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
}

.base-layout__sidebar {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 400px;
  height: 100%;
  padding: 8px;
  background-color: #fcd34d; // amber-300
}

.base-layout__sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding-bottom: 72px;
  background-color: #f59e0b; // amber-500
}

.base-layout__sidebar-bottom {
  position: absolute;
  display: flex;
  flex-shrink: 0;
  width: 100%;
  height: 72px;
  left: 0;
  bottom: 0;
  padding: 8px;
}

.base-layout__sidebar-bottom-inner {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-color: #92400e; // amber-800
}

.base-layout__resize-handle {
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0;
  right: 0;
  cursor: ew-resize;

  &:hover {
    background-color: #d1d5db; // gray-300
  }
}

.base-layout__content {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  background-color: #fbbf24; // amber-400
}
</style>
