Webサイト刷新(ヘッダ編)

こんにちは。Webサイトの刷新と銘打ってシリーズで続けていきたいと思っています！
今回はヘッダ編となります。一番簡単に進められそうなところをチョイスしています。(モチベーション上げるために)

現サイトは以下で、当時は頑張って作りましたけど、デザインセンスの欠片が少しだけ感じたい。
https://penta-d-system.com/

環境

• nodejs: 16系
• nuxt: 2.15.6
• @nuxtjs/vuetify: 1.11.2

nuxt2系で、vuetifyでコンポーネントを作成しています。
いまはnuxt3系が主流で、3.11.2が最新バージョンとなっています。技術の進歩は凄まじい。

現状

ロゴ、新着と全記事で構成されています。

<v-btn v-for="item in menu" :key="item.to" text :to="item.to" nuxt>
    {{ item.title }}
</v-btn>

各リンクはdataで定義しているので、v-forで作成しています。

やりたいこと

1. ボタンからリンク形式に変更
   • hover時、ページが表示されている時に下線を引いて強調する
2. サイトのイメージカラーを決定
   • 色合いも適当なので決定する

ボタンからリンク形式に変更

nuxt-linkに変更して、クラスを適用しました。クラスはvuetifyで用意されているものを基本使うようにして、特殊なことをする時は自前のクラスを実装します。

default.vue

<nuxt-link
  v-for="item in menu"
  :key="item.to"
  :to="item.to"
  nuxt
  class="black--text font-weight-bold text-decoration-none link"
  :class="{ active: isActive(item.to) }"
>
  {{ item.title }}
</nuxt-link>

  methods: {
    isActive(to) {
      return this.$route.path === to
    },
  },

<style scoped>
.active,
.link:hover {
  color: var(--v-primary-base) !important;
  border-bottom: 2px solid var(--v-primary-base);
}
</style>

var(--v-primary-base)は、後述のvuetifyをカスタムすることで使えます。

サイトのイメージカラーを決定

Adobe Colorでサイトのカラーイメージを決めました
https://color.adobe.com/ja/trends/Ui/ux?page=2

vuetifyのカスタムでprimaryカラーを変更します。

nuxt.config.js

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    theme: {
      dark: false,
      light: {
        primary: '#614BF2',
        accent: '#7F6DF2',
        secondary: '#B6D93B',
        // info: colors.cyan.lighten5,
        // warning: colors.amber.base,
        // error: colors.deepOrange.accent4,
        // success: colors.green.darken2,
        // normalWhite: colors.shades.white,
      },
      // --v-primary-baseなどを使えるようにする設定
      options: {
        customProperties: true,
      },
    },
  },

とりあえずsecondaryまで変更しました。

完成

クリック、マウスオーバー時にprimaryカラーが変更され、下線が引かれました 😁