<template>
  <main class="app-content contenthidden">
    <div class="app-content__scroll contentscroll">
      <div class="app-content__inner">
        <AppSectionBar />
        <router-view></router-view>
      </div>
    </div>
  </main>
</template>
  
  <script>
  import AppSectionBar from './AppSectionBar.vue';

  export default {
    name: 'AppContent',
    components: {
      AppSectionBar
    }
  };
  </script>
  
<style scoped>
.app-content {
  flex: 1;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.app-content__scroll {
  background: transparent;
  height: 100%;
  min-height: 0;
}

.app-content__inner {
  max-width: var(--shell-max-width);
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 14px 18px 12px;
  display: flex;
  flex-direction: column;
}

.app-content__inner > :last-child {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 960px) {
  .app-content__inner {
    padding: 12px 12px 10px;
  }
}
</style>
  
