<template>
    <header-bar />

    <div class="min-h-screen flex overflow-hidden">
        <sidebar />

        <div class="flex-1 flex flex-col overflow-hidden">
            <div class="bg-indigo-300 flex-1 flex items-stretch overflow-hidden">
                <main class="flex-1 overflow-y-auto pb-10">
                    <section class="min-w-0 flex-1 h-full flex flex-col overflow-hidden lg:order-last">
                        <flash-messages />
                        <slot />
                    </section>
                </main>
                <sidebar-secondary />
            </div>
        </div>
    </div>
</template>

<script>
import FlashMessages from '@/Shared/Misc/FlashMessages'
import HeaderBar from '@/Shared/LayoutParts/HeaderBar'
import Sidebar from '@/Shared/LayoutParts/Sidebar'
import SidebarSecondary from '@/Shared/LayoutParts/SidebarSecondary'

export default {
  components: {
      FlashMessages,
      HeaderBar,
      Sidebar,
      SidebarSecondary,
  },
}
</script>
