screen/src/layout/index.vue

<template>
  <div class="app-wrapper">
    <sidebar />
    <div class="main-wrapper">
      <navbar />
      <app-main />
    </div>
  </div>
</template>

<script setup>
import Sidebar from './components/Sidebar/index.vue'
import Navbar from './components/Navbar/index.vue'
import AppMain from './components/AppMain.vue'
</script>

<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
}

:deep(.sidebar-container) {
  flex-shrink: 0;
  width: 200px;
  transition: width 0.28s ease;

  &.is-collapse {
    width: 54px;
  }
}
</style>