<commit_before><template>
  <div>
    <div :class="sidebarClasses">
      <h1
        class="sidebar__header"
        title="Click to hide"
        @click="toggleSidebarVisibility"
      >
        ライター
      </h1>
      <sidebar-lists />
    </div>
    <p
      class="sidebar__show-button"
      @click="toggleSidebarVisibility"
    >
      Show sidebar
    </p>
  </div>
</template>

<script>
import SidebarLists from './SidebarLists';

export default {
  components: {
    'sidebar-lists': SidebarLists,
  },
  data() {
    return {
      sidebarVisibility: false,
    };
  },
  computed: {
    sidebarClasses() {
      return {
        'sidebar': true,
        'sidebar--hidden': this.sidebarVisibility,
      };
    },
  },
  methods: {
    toggleSidebarVisibility() {
      this.sidebarVisibility = !this.sidebarVisibility;
    },
  }
}
</script>

<style lang="scss">
.sidebar {
  background: $gray-dark;
  bottom: 0;
  display: block;
  left: 0;
  height: 100%;
  max-width: $sidebar-width;
  min-width: $sidebar-width;
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  transition: left 0.5s;
  z-index: $sidebar-index;
}

.sidebar--hidden {
  left: -$sidebar-width;
  transition: left 1s;

  + .sidebar__show-button {
    left: $regular-margin;
    transition: left 1s;
  }
}

.sidebar__header {
  color: $white;
  cursor: pointer;
  float: left;
  text-align: center;
  width: 100%;
}

.sidebar__show-button {
  color: $gray-dark;
  cursor: pointer;
  display: block;
  font-size: $small-font;
  left: -$sidebar-width;
  position: fixed;
  top: $small-margin;
  transition: left 1s;

  &:hover {
    color: $red;
    text-decoration: underline;
  }
}
</style><commit_msg>Updated sidebar component.<commit_after><template>
  <div>
    <div :class="sidebarClasses">
      <h1
        class="sidebar__header"
        title="Click to hide"
        @click="toggleSidebarVisibility"
      >
        ライター
      </h1>
      <sidebar-lists />
    </div>
    <sidebar-list-items
      :listVisibility="sidebarVisibility"
    />
    <p
      :class="showButtonClasses"
      @click="toggleSidebarVisibility"
    >
      Show sidebar
    </p>
  </div>
</template>

<script>
import SidebarLists from './SidebarLists';
import SidebarListItems from './SidebarListItems';

export default {
  components: {
    'sidebar-lists': SidebarLists,
    'sidebar-list-items': SidebarListItems,
  },
  data() {
    return {
      sidebarVisibility: false,
    };
  },
  computed: {
    sidebarClasses() {
      return {
        'sidebar': true,
        'sidebar--hidden': this.sidebarVisibility,
      };
    },
    showButtonClasses() {
      return {
        'sidebar__show-button': true,
        'sidebar__show-button--hidden': !this.sidebarVisibility,
      };
    },
  },
  methods: {
    toggleSidebarVisibility() {
      this.sidebarVisibility = !this.sidebarVisibility;
    },
  }
}
</script>

<style lang="scss">
.sidebar {
  background: $gray-dark;
  bottom: 0;
  display: block;
  left: 0;
  height: 100%;
  width: $sidebar-width;
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  transition: left 0.5s;
  z-index: $sidebar-index;
}

.sidebar--hidden {
  left: -$sidebar-width;
  transition: left 1s;
}

.sidebar__header {
  color: $white;
  cursor: pointer;
  float: left;
  text-align: center;
  width: 100%;
}

.sidebar__show-button {
  color: $gray-dark;
  cursor: pointer;
  display: block;
  font-size: $small-font;
  left: $regular-margin;
  position: fixed;
  top: $small-margin;
  transition: left 1s;

  &:hover {
    color: $red;
    text-decoration: underline;
  }

  &.sidebar__show-button--hidden {
    left: -$sidebar-width;
    transition: left 1s;
  }
}
</style>
{'fraction_non_alphanumeric': 0.14585012087026591, 'fraction_numerical': 0.008595218909481601, 'mean_word_length': 2.5945945945945947, 'pattern_counts': {'":': 0, '<': 34, '<?xml version=': 0, '>': 34, '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': '6322846', 'n_tokens_mistral': 1315, 'n_tokens_neox': 1278, 'n_words': 263}