<template>
  <el-header class="gobang-header flex items-center">
    <router-link custom :to="{ name: 'GobangList' }" v-slot="{ navigate }">
      <div class="gobang-header__left flex items-center" @click="navigate">
        <el-icon :size="30"><icon-cs-gobang /></el-icon>
        <h2 v-show="!smLess" class="gobang-header__title">五子棋</h2>
      </div>
    </router-link>
    <slot></slot>
  </el-header>
</template>
<style lang="scss" scoped>
@use '@/assets/mixins' as m;
.gobang-header {
  @include m.header(1);
  user-select: none;
  &__left {
    z-index: 1;
    gap: 10px;
  }
}
</style>
<script setup lang="ts">
import { useMediaStore } from '@/stores/media';
import { storeToRefs } from 'pinia';
const { smLess } = storeToRefs(useMediaStore());
</script>
