React + Material-UIのアプリで選択されているサイドバーメニューの項目を目立たせてみた

2020.08.08

こんにちは、CX事業本部の若槻です。

今回は、前回の記事で作成したReact + Material-UIのアプリで、選択されているサイドバーメニューの項目を目立たせてみました。

やりたいこと

サイドバーメニューのうち今開いているページの項目を強調して目立たせたいです。例えば商品ページが開かれているならメニュー中の「商品ページ」項目にスタイルを適用したいです。 スクリーンショット_2020-08-08_17_26_13.png

アウトプット

「トップページ」「商品ページ」それぞれ選択時に次のようにスタイルを適用するようにしました。

  • トップページを開いた時 image.png

  • 商品ページを開いた時 image.png

やってみた

開いているページの項目の強調は、React Routerの<NavLink>というAPIを使えば実現可能です。

ページのナビゲーションに<Link>の代わりに<NavLink>を使用しactiveStype属性を定義することにより、現在のURLと一致する要素にスタイルを追加することができます。

現在は次のように<Link>を使用してナビゲーションを実装しています。

          <List>
            <Link to="/" className={classes.link}>
              <ListItem button>
                <ListItemIcon>
                  <HomeIcon />
                </ListItemIcon>
                <ListItemText primary="トップページ" />
              </ListItem>
            </Link>
            <Link to="/products" className={classes.link}>
              <ListItem button>
                <ListItemIcon>
                  <ShoppingCartIcon />
                </ListItemIcon>
                <ListItemText primary="商品ページ" />
              </ListItem>
            </Link>
          </List>

<NavLink>react-router-domからインポートして使用します。

import { NavLink } from 'react-router-dom';

選択されたメニュー項目適用したいスタイルを定義します。ここでは文字色を青とし、下線を追加するようにしています。

  const current = {
    color: 'blue',
    textDecoration: 'underline',
  };

<Link><NavLink>に変更し、それぞれに属性としてexactactiveStyle={current}属性を追加します。

          <List>
            <NavLink exact to="/" className={classes.link} activeStyle={current}>
              <ListItem button>
                <ListItemIcon>
                  <HomeIcon />
                </ListItemIcon>
                <ListItemText primary="トップページ" />
              </ListItem>
            </NavLink>
            <NavLink exact to="/products" className={classes.link} activeStyle={current}>
              <ListItem button>
                <ListItemIcon>
                  <ShoppingCartIcon />
                </ListItemIcon>
                <ListItemText primary="商品ページ" />
              </ListItem>
            </NavLink>
          </List>

開いているページのメニュー項目に定義したスタイルが適用されるようになりました。 image.png image.png

注意点として、今回の//productsのようにURL同士でパス文字列を内包する場合は<NavLink>の中でexact属性を指定する必要があります。

指定しない場合は下記のように商品ページ(/products)を開くと、<NavLink>to属性で/パスが含まれる「トップページ」と「商品ページ」の両方にスタイルが適用されてしまいます。 image.png image.png

文字色にMaterial-UIのカラー定義を使用し、さらに背景色を適用したい場合は、以下のようにスタイルの定義を変更します。

  const current = {
    color: colors.blue[800],
    textDecoration: 'none',
    background: colors.grey[100],
    width: '100%',
    display: 'inline-block',
  };

適用されるスタイルを変更できました。 image.png image.png

おわりに

React + Material-UIのアプリで選択されているサイドバーメニューの項目を目立たせてみました。

フロントエンドの経験はあまりなかったのですが、こうやって画面のデザインを自分で考えてコントロールできるというのは楽しいですね!

参考

以上