<commit_before><template>

  <nav role="navigation" aria-label="Main user navigation">
    <a v-link="learnLink" @click='closeSearch' :class="learnClass">
      <div class='content'>
        <svg role="presentation" height="40" width="40" viewbox="0 0 24 24" src="../icons/learn.svg"></svg>
        <label>Learn</label>
      </div>
    </a>
    <a v-link="exploreLink" @click='closeSearch' :class="exploreClass">
      <div class='content'>
        <svg role="presentation" height="40" width="40" viewbox="0 0 24 24" src="../icons/explore.svg"></svg>
        <label>Explore</label>
      </div>
    </a>
  </nav>

</template>


<script>

  const pageMode = require('../../state/getters').pageMode;
  const constants = require('../../state/constants');
  const actions = require('../../actions');

  module.exports = {
    vuex: {
      getters: {
        pageMode,
        searchOpen: state => state.searchOpen,
      },
      actions: {
        // TODO - this logic should really be triggered purely by the vue router.
        // however since the URL doesn't change when the user is on the root,
        // this is currently to close the search pane.
        closeSearch(store) {
          if (this.searchOpen) {
            actions.toggleSearch(store);
          }
        },
      },
    },
    computed: {
      learnLink() {
        return { name: constants.PageNames.LEARN_ROOT };
      },
      learnClass() {
        return { active: this.pageMode === constants.PageModes.LEARN };
      },
      exploreLink() {
        return { name: constants.PageNames.EXPLORE_ROOT };
      },
      exploreClass() {
        return { active: this.pageMode === constants.PageModes.EXPLORE };
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'
  @require '../learn'
  @require 'jeet'

  $font-size = 1em
  $nav-size = $left-margin - $card-gutter * 0.5
  $portrait-scale = 0.8

  nav
    background: $core-bg-light
    font-weight: 300
    overflow: hidden
    position: fixed
    z-index: 2
    @media screen and (min-width: $portrait-breakpoint + 1)
      font-size: 1em
      height: 100%
      top: 0
      left: 0
      width: $nav-size px
    @media screen and (max-width: $portrait-breakpoint)
      font-size: $font-size * $portrait-scale
      height: $nav-size * $portrait-scale px
      bottom: 0
      width: 100%

  .content
    align(all)

  a
    margin: 0
    padding: 0
    position: relative
    @media screen and (min-width: $portrait-breakpoint + 1)
      height: 150px
      display: block
    @media screen and (max-width: $portrait-breakpoint)
      height: 100%
      column(1/2)
      padding-bottom: 4px

  a.active
    color: $core-bg-light
    background: $core-action-normal

  label
    display: block
    text-align: center

  svg
    display: block
    margin: auto
    fill: $core-action-normal
    transition: fill $core-time ease-out
    @media screen and (max-width: $portrait-breakpoint)
      height: 30px

  a:hover svg
    fill: $core-action-dark

  a.active svg
    fill: $core-bg-light

  a.active:hover svg
    fill: $core-bg-light

</style><commit_msg>reverting nav layout back to table-based<commit_after><template>

  <div class='nav-wrapper'>
    <nav class='nav-main' role="navigation" aria-label="Main user navigation">
      <div class='link-wrapper'>
        <a class='link' v-link="learnLink" @click='closeSearch' :class="learnClass">
          <div class='content'>
            <svg role="presentation" height="40" width="40" viewbox="0 0 24 24" src="../icons/learn.svg"></svg>
            <label>Learn</label>
          </div>
        </a>
      </div>
      <div class='link-wrapper'>
        <a class='link' v-link="exploreLink" @click='closeSearch' :class="exploreClass">
          <div class='content'>
            <svg role="presentation" height="40" width="40" viewbox="0 0 24 24" src="../icons/explore.svg"></svg>
            <label>Explore</label>
          </div>
        </a>
      </div>
    </nav>
  </div>

</template>


<script>

  const pageMode = require('../../state/getters').pageMode;
  const constants = require('../../state/constants');
  const actions = require('../../actions');

  module.exports = {
    vuex: {
      getters: {
        pageMode,
        searchOpen: state => state.searchOpen,
      },
      actions: {
        // TODO - this logic should really be triggered purely by the vue router.
        // however since the URL doesn't change when the user is on the root,
        // this is currently to close the search pane.
        closeSearch(store) {
          if (this.searchOpen) {
            actions.toggleSearch(store);
          }
        },
      },
    },
    computed: {
      learnLink() {
        return { name: constants.PageNames.LEARN_ROOT };
      },
      learnClass() {
        return { active: this.pageMode === constants.PageModes.LEARN };
      },
      exploreLink() {
        return { name: constants.PageNames.EXPLORE_ROOT };
      },
      exploreClass() {
        return { active: this.pageMode === constants.PageModes.EXPLORE };
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'
  @require '../learn'

  $font-size = 1em
  $nav-size = $left-margin - $card-gutter * 0.5
  $portrait-scale = 0.8

  .nav-wrapper
    display: table
    background: $core-bg-light
    font-weight: 300
    position: fixed
    z-index: 2
    @media screen and (min-width: $portrait-breakpoint + 1)
      font-size: 1em
      height: 100%
    @media screen and (max-width: $portrait-breakpoint)
      font-size: $font-size * $portrait-scale
      bottom: 0
      width: 100%

  .nav-main
    @media screen and (max-width: $portrait-breakpoint)
      display: table-row

  .link-wrapper
    @media screen and (min-width: $portrait-breakpoint + 1)
      display: table-row
    @media screen and (max-width: $portrait-breakpoint)
      display: table-cell

  .link
    margin: 0
    padding: 6px
    vertical-align: middle
    text-align: center
    @media screen and (min-width: $portrait-breakpoint + 1)
      display: table-cell
      height: 150px
    @media screen and (max-width: $portrait-breakpoint)
      display: block

  a.active
    color: $core-bg-light
    background: $core-action-normal

  label
    display: block
    text-align: center

  svg
    display: block
    margin: auto
    fill: $core-action-normal
    transition: fill $core-time ease-out
    @media screen and (max-width: $portrait-breakpoint)
      height: 30px

  a:hover svg
    fill: $core-action-dark

  a.active svg
    fill: $core-bg-light

  a.active:hover svg
    fill: $core-bg-light

  .content
    display: inline-block

</style>
{'fraction_non_alphanumeric': 0.1412344940965476, 'fraction_numerical': 0.015094903601853235, 'mean_word_length': 2.264390243902439, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 59, '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': '673504', 'n_tokens_mistral': 2248, 'n_tokens_neox': 2117, 'n_words': 527}