<template>
  <v-app>
    <v-layout column fill-height>
      <TitleBar />
      <Dashboard>
        <div slot="left" class="d-flex flex-column fill-height">
          <Message />
          <ImageCarousel class="mt-auto" />
        </div>
        <div slot="right" class="d-flex flex-column fill-height">
          <CalendarCarousel />
          <DashboardInfo class="mt-auto" />
        </div>
      </Dashboard>
      <TickerBar />
    </v-layout>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

import TitleBar from "./components/title/TitleBar.vue";
import Dashboard from "./components/Dashboard.vue";
import ImageCarousel from "./components/ImageCarousel.vue";
import Message from "./components/Message.vue";
import CalendarCarousel from "./components/calendar/CalendarCarousel.vue";
import DashboardInfo from "./components/DashboardInfo.vue";
import TickerBar from "./components/TickerBar.vue";

@Component({
  components: {
    TitleBar,
    Dashboard,
    ImageCarousel,
    Message,
    CalendarCarousel,
    DashboardInfo,
    TickerBar,
  },
})
export default class App extends Vue {}
</script>

<style>
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
</style>
