naive-ui/demo/Site.vue

<template>
  <n-layout position="absolute" class="root-layout">
    <site-header :items="flattenedItems" />
    <n-layout class="home-layout" style="top: 64px; overflow: hidden;" position="absolute">
      <router-view />
    </n-layout>
  </n-layout>
</template>

<script>
import SiteHeader from './SiteHeader.vue'
import menuOptions from './menu-options'
// import { i18n } from './init'
import { loadingBarApiRef } from './routes/router'
import simulatedComputed from '../src/_mixins/simulatedComputed'

export default {
  name: 'Site',
  inject: [
    'SiteProvider',
    'loadingBar'
  ],
  components: {
    SiteHeader
  },
  mixins: [
    simulatedComputed({
      menuGenerationOptions: {
        get () {
          return {
            theme: this.SiteProvider.theme,
            lang: this.SiteProvider.lang,
            mode: this.mode
          }
        },
        deps: ['SiteProvider.theme', 'SiteProvider.lang', 'mode'],
        default: null
      }
    })
  ],
  provide () {
    return {
      Site: this
    }
  },
  computed: {
    items () {
      return menuOptions(this.menuGenerationOptions)
    },
    flattenedItems () {
      const flattenedItems = []
      const traverse = items => {
        if (items) {
          items.forEach(item => {
            if (item.childItems) traverse(item.childItems)
            else flattenedItems.push(item)
          })
        }
      }
      traverse(this.items)
      return flattenedItems
    }
  },
  mounted () {
    this.loadingBar.finish()
    loadingBarApiRef.value = this.loadingBar
  }
}
</script>

<style lang="scss" scoped>
.demo {
  z-index: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  min-width: 1080px;
}
</style>

<style lang="scss">
body {
  -webkit-text-size-adjust: 100%;
}

.root-layout.n-layout.n-light-theme {
  background-color: #FFF;
}
.home-layout.n-layout.n-light-theme {
  background-color: #FFF;
}
</style>