You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

default.vue 897B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <div class="layout">
  3. <!-- Window Buttons -->
  4. <LayoutTopbar />
  5. <!-- Navigation -->
  6. <LayoutNavbar />
  7. <!-- Queue -->
  8. <LayoutQueuebar />
  9. <!-- Content -->
  10. <div id="layout-content" class="layout__content">
  11. <nuxt />
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. middleware: ['wizard'],
  18. }
  19. </script>
  20. <style lang="scss" scoped>
  21. .layout {
  22. @apply h-full;
  23. display: grid;
  24. grid-template-columns: 200px 1fr 200px;
  25. grid-template-rows: 30px 50px 1fr;
  26. grid-template-areas: "topbar topbar topbar" "navbar navbar navbar" "content content jobbar";
  27. .layout__topbar {
  28. grid-area: topbar;
  29. }
  30. .layout__navbar {
  31. grid-area: navbar;
  32. }
  33. .layout__jobbar {
  34. grid-area: jobbar;
  35. }
  36. .layout__content {
  37. @apply relative overflow-hidden overflow-y-auto;
  38. grid-area: content;
  39. height: calc(100vh - 80px);
  40. }
  41. }
  42. </style>