<template>
  <v-app>
    <div class="page-content">
      <div class="main-header">
        <div class="infolegale-logo">
          <a class="logo" :href="portailUrl">Infolegale</a>
        </div>
        <h1 class="titleApp">MOTEUR DE RECHERCHE</h1>
        <div class="toolbar-spacer"></div>
      </div>
      <v-layout class="main-container">
        <div class="main-container-wrapper">
          <slot name="content"></slot>
        </div>
      </v-layout>
    </div>
  </v-app>
</template>

<script>
  export default {
    data() {
      return {
        test: null,
      };
    },
  };
</script>

<style lang="scss">
  @import "~@/styles/variables.scss";
  @import "~@/styles/mixins.scss";

  html {
    overflow-y: hidden;
  }

  body {
    display: flex;
  }

  .adminuser-sidenav-container {
    position: fixed;
    top: calc(#{$layout-toolbar-height} + 15px);
  }

  .titleApp {
    padding-left: 19px;
    padding-top: 7px;
    font-size: 24px;
    font-weight: 400;
  }

  .page-content {
    min-height: 100%;
    max-height: 100%;
    flex: 1;
    display: flex;
    flex-flow: column;
  }

  @media (min-width: $layout-breakpoint-sm) {
    .page-content {
      overflow-x: hidden;
    }
  }

  // Main header

  .main-header {
    background-color: $color-ilg-blue-3 !important;
    padding: 0;
    min-height: $layout-toolbar-height;
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 8;
    display: flex;
    transform: inherit;
    padding-right: $layout-user-nav-width;
    align-items: center;
    color: rgba(255, 255, 255, 0.87);
    @media (max-width: $layout-breakpoint-xs) {
      position: fixed;
      min-height: $layout-xs-toolbar-height;
      width: 100vw;
      top: 0;
    }
  }

  // Logo

  .infolegale-logo {
    width: 240px;
    @media (min-width: $layout-breakpoint-md) {
      border-right: 1px solid white;
    }

    .logo {
      display: block;
      position: relative;
      top: 3px;
      text-indent: -9999px;
      width: 204px;
      height: 41px !important;
      margin-left: 12px;
      background: no-repeat url("../../static/infolegale.png");
    }

    @media (max-width: $layout-breakpoint-md) {
      width: 48px;
      .logo {
        width: 46px;
      }
    }
    @media (max-width: $layout-breakpoint-xs) {
      width: 208px;
      display: none;
      .logo {
        width: 160px;
        margin: 0;
        background-size: contain;
      }
      &.show{
        display: block;
      }
    }
  }

  // Space toolbar
  .toolbar-spacer {
    flex-grow: 1;
  }

  // Search nav

  .search-input-expand {

    .toolbar-spacer {
      display: none;
    }

    // Hide nav button text
    .toolbar-nav-button {
      span {
        display: none;
      }
    }
    // Make search input grow
    .toolbar-search-input {
      max-width: 800px;
      flex-grow: 1;
    }
  }

  // Main container

  .main-container {
    position: relative;
    z-index: 1;
    height: calc(100vh - #{$layout-toolbar-height});
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: $color-ilg-grey-1;
    @media (max-width: $layout-breakpoint-xs) {
      top: $layout-xs-toolbar-height;
    }
  }

  .main-container-wrapper {
    background-color: $color-ilg-grey-1;
    position: relative;
    height: 100%;
    width: 100%;
    padding: 16px;

    .md-sortable-icon {
      font-size: 16px !important;
      font-weight: 400;
    }
  }

  // sidenav
  .sidenav {
    .ilg-info-contact {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 8px 16px;
      text-align: center;
      text-transform: uppercase;
      width: $layout-main-sidenav-size-md;
      font-size: 12px;
    }
  }

  .ilg-sidenav-right{
    width: 200px;
    z-index: 20000;
    margin: 0;
    padding: 0;
    overflow-y: inherit;
    .md-active{
      right:0;
    }
  }

  .md-sidenav .md-sidenav-content {
    z-index: 50000;
  }


  // TABLET

  @media (max-width: $layout-breakpoint-sm) {
    .main-container {
      height: calc(100vh - #{$layout-toolbar-height});
      background-color: $color-ilg-white;
    }
  }

  // MOBILE

  @media (max-width: $layout-breakpoint-xs) {
    .md-sidenav {
      .md-sidenav-content{
        position: fixed;
      }
      .md-backdrop {
        position: fixed;
      }
    }

    .md-drawer{
      width: 200px;
      max-width: calc(100vw - 125px);
    }
    .main-container-wrapper {
      padding: 0;
    }
    .main-container {
      height: calc(100vh - #{$layout-xs-toolbar-height});
      background-color: $color-ilg-white;
      padding: 0;
    }
    .md-button.md-icon-button {
      border-radius: 0;
      display: block;
      &.menu-button{
        margin: 0 16px 0 6px;
        i.md-icon{
          font-size: 32px;
        }
        &.search-input-focus{
          display: none;
        }
      }
    }
    .user-nav-button{
      position: absolute;
      right: 0;
    }
    .user-sidenav {
      .md-sidenav-content{
        top: 60px;
      }
    }
  }

  @media (max-width: $layout-breakpoint-sm) {
    #sidenavBtn {
      display: block;
    }
  }

  @media (min-width: $layout-breakpoint-md) {
    #sidenavBtn {
      display: none;
    }
  }
</style>
