<commit_before><template lang="pug">
div(:data-test='pageTestName' :class='$scopedSlots.sidebar ? "p-with-sidebar" : "p-no-sidebar"')
  header.p-header
    h1.p-title(:data-test='pageTestHeaderName')
      img.c-logo(src='/assets/images/group-income-icon-transparent.png' alt="GroupIncome's logo")
      i18n
        slot(name='title')
    i18n(
      v-if='$scopedSlots.description'
      class='p-descritpion'
      tag='p'
    )
      slot(name='description')

  main.p-main(:class='mainClass')
    slot

  aside.p-sidebar(
    v-if='$scopedSlots.sidebar'
    :class="{ 'is-active': ephemeral.isActive }"
  )
    toggle(@toggle='toggleMenu' element='sidebar')
    slot(name='sidebar')
</template>

<script>
import Toggle from '@containers/sidebar/Toggle.vue'

export default {
  name: 'Page',
  components: {
    Toggle
  },
  props: {
    pageTestName: String,
    pageTestHeaderName: String,
    mainClass: String
  },
  data () {
    return {
      ephemeral: {
        isActive: false
      }
    }
  },
  methods: {
    toggleMenu () {
      this.ephemeral.isActive = !this.ephemeral.isActive
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/_variables.scss";

$pagePadding: 1rem;
$pagePaddingTablet: 24px;
$pagePaddingDesktop: 5.5rem;

.p-no-sidebar {
  height: 100vh;
  width: 100vw;

  @include tablet {
    overflow: auto;
    width: auto;
  }
}

.p-with-sidebar {
  display: grid;
  overflow: auto;
  grid-template-areas: "p-header" "p-main";
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100vw;
  height: 100vh;

  @include tablet {
    width: auto;
  }

  @include widescreen {
    grid-template-columns: 1fr $rightSideWidth;
    grid-template-areas:
      "p-header p-sidebar"
      "p-main p-sidebar";
  }
}

.p-main {
  grid-area: p-main;
  padding-left: $spacer;
  padding-right: $spacer;
  margin: 0 auto;
  max-width: 43rem;
  @include overflow-touch;

  &.full-width {
    max-width: 100%;
  }

  @include tablet {
    padding-left: $pagePaddingTablet;
  }

  @include widescreen {
    margin-left: 0;
    padding-left: $pagePaddingDesktop;
  }
}

.p-header {
  grid-area: p-header;
  display: flex;
  flex-direction: column;
  justify-content: center;<commit_msg>Add overflow auto on main container<commit_after><template lang="pug">
div(:data-test='pageTestName' :class='$scopedSlots.sidebar ? "p-with-sidebar" : "p-no-sidebar"')
  header.p-header
    h1.p-title(:data-test='pageTestHeaderName')
      img.c-logo(src='/assets/images/group-income-icon-transparent.png' alt="GroupIncome's logo")
      i18n
        slot(name='title')
    i18n(
      v-if='$scopedSlots.description'
      class='p-descritpion'
      tag='p'
    )
      slot(name='description')

  main.p-main(:class='mainClass')
    slot

  aside.p-sidebar(
    v-if='$scopedSlots.sidebar'
    :class="{ 'is-active': ephemeral.isActive }"
  )
    toggle(@toggle='toggleMenu' element='sidebar')
    slot(name='sidebar')
</template>

<script>
import Toggle from '@containers/sidebar/Toggle.vue'

export default {
  name: 'Page',
  components: {
    Toggle
  },
  props: {
    pageTestName: String,
    pageTestHeaderName: String,
    mainClass: String
  },
  data () {
    return {
      ephemeral: {
        isActive: false
      }
    }
  },
  methods: {
    toggleMenu () {
      this.ephemeral.isActive = !this.ephemeral.isActive
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/_variables.scss";

$pagePadding: 1rem;
$pagePaddingTablet: 24px;
$pagePaddingDesktop: 5.5rem;

.p-no-sidebar {
  height: 100vh;
  width: 100vw;

  @include tablet {
    overflow: auto;
    width: auto;
  }
}

.p-with-sidebar {
  display: grid;
  overflow: auto;
  grid-template-areas: "p-header" "p-main";
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100vw;
  height: 100vh;

  @include tablet {
    width: auto;
  }

  @include widescreen {
    grid-template-columns: 1fr $rightSideWidth;
    grid-template-areas:
      "p-header p-sidebar"
      "p-main p-sidebar";
  }
}

.p-main {
  grid-area: p-main;
  padding-left: $spacer;
  padding-right: $spacer;
  margin: 0 auto;
  max-width: 43rem;
  overflow: auto;
  @include overflow-touch;

  &.full-width {
    max-width: 100%;
  }

  @include tablet {
    padding-left: $pagePaddingTablet;
  }

  @include widescreen {
    margin-left: 0;
    padding-left: $pagePaddingDesktop;
  }
}

.p-header {
  grid-area: p-header;
  display: flex;
  flex-direction: column;
  justify-content: center;
{'fraction_non_alphanumeric': 0.15587846763540292, 'fraction_numerical': 0.01453104359313078, 'mean_word_length': 2.9711538461538463, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4013456', 'n_tokens_mistral': 1770, 'n_tokens_neox': 1680, 'n_words': 300}