app-navi.riot

<app-navi>
  <route path="(.*)">
    <a each={ link in state.links }
      href="{ link.url }"
      class={ isLinkSelected(link, route) ? 'selected' : '' }>
      { link.name }
    </a>
  </route>

  <script>
    export default {
      state: {
        links: [
          { name: "H", url: "#" },
          { name: "F", url: "#/first" },
          { name: "S", url: "#/second" }
        ]
      },
      isLinkSelected(link, route) {
        const isHome = !route.hash || route.hash === '#'

        if (link.url === '#') {
          return isHome
        }

        return !isHome && route.hash.includes(link.url)
      }
    }
  </script>

  <style>
    :host {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      box-sizing: border-box;
      font-family: sans-serif;
      text-align: center;
      color: #666;
      background: #333;
      width: 50px;
      transition: width .2s;
    }
    :host:hover {
      width: 60px;
    }
    a {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding: 0 .8em;
      color: white;
      text-decoration: none;
      background: #444;
    }
    a:hover {
      background: #666;
    }
    a.selected {
      background: teal;
    }
  </style>

</app-navi>