<script setup>
import Footer from './components/Footer.vue'
import Toolbar from './components/Toolbar.vue'
</script>

<template>
<div id="contentPane">
  <Toolbar></Toolbar>
  <div v-if="$route.path === '/ContactUs'">
    <router-view/>
  </div>
  <div v-else id="defaultcontainer">
    <div id="content"><router-view/></div>
    <div id="footer">
      <Footer></Footer>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
@import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";

#contentPane{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#defaultcontainer{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#content{
  display: flex;
  position: relative;
  flex:1;
  width: 100%;
  min-height: 100%;
}

#footer{
  margin-top: 0px;
}

@include media-breakpoint-between(xs, md) {
}

@include media-breakpoint-up(md) {
}
</style>
