<template>
  <v-app>
    <v-main class="bookfarm-app">
      <div class="library">
        <v-app-bar
          :elevation="2"
          color="#EEEBE0"
        >
          <div style="width:64px">
            <v-img
              src="@/assets/logo.png"
            />
          </div>
          <v-app-bar-title class="font-weight-medium">
            BookFarm
          </v-app-bar-title>
        </v-app-bar>
        <router-view />
      </div>
    </v-main>
  </v-app>
</template>

<script lang="ts" setup>

</script>
<style lang="css">
.library {
  margin-top: 8px;
  padding: 0 12px;
  overflow-y: scroll;
  max-height: 620px !important;
}

body {
  position: absolute;
  width: 342px;
  max-height: 620px !important;
  top: 118px;
  left: calc(50% - 174px);
}
.v-application__wrap {
  width: 342px;
  min-height: 708px !important;
}

.v-toolbar {
  border-radius: 36px 36px 0 0 !important;
  top: 118px !important;
  left: calc(50% - 176px) !important;
  width: 344px !important;
}

.v-application {
  border-radius: 36px;
}

.recommandations {
  position: fixed;
  top: 790px !important;
  width: 342px;
  left: calc(50% - 174px) !important;
  border-radius: 0 0 36px 36px  !important;
}

</style>
