Vuetify.js Responsive v-toolbar not triggering open/close event

I'm attempting to create a responsive navigation toolbar (using the v-toolbar component and router-links). I'd like to create a navigationbar that collapses into a responsive vertical list (similar to bootstrap navbar) so that when on mobile a hamburger menu appears and a vertical list can be shown and hidden by clicking on the hamburger icon.

I've created a toolbar (see here) however when I reduce the size of the display to activate the responsive toolbar the burger menu does not expand to show the router-links. Similarly, the router-links do not activate (I suspect that the anchor tag is being overridden by the v-btn).

HTML (Pug)

div#app
  nav
    v-toolbar
      v-toolbar-title
        router-link.nav-item(to="/") Mysite
      v-spacer
      v-toolbar-side-icon.hidden-md-and-up
      v-toolbar-items.hidden-sm-and-down
        v-btn(flat)
          router-link.nav-item(to="/about") About
        v-btn(flat)
          router-link.nav-item(to="/contact") Contact

Edit
Edited code to implement suggestion from LShapz (updated Codepen here)

nav
  v-toolbar.hidden-sm-and-down
    v-toolbar-title
      router-link.nav-item(to="/") MySite
    v-spacer
    v-toolbar-items
      v-btn(flat)
        router-link.nav-item(to="/about") About
      v-btn(flat)
        router-link.nav-item(to="/contact") Contact

  div.hidden-md-and-up
    v-expansion-panel
      v-expansion-panel-content
        div(slot="header")
          router-link.nav-item(to="/") MySite
        v-card
          v-card-text
            router-link.nav-item(to="/about") About
        v-card
          v-card-text
            router-link.nav-item(to="/contact") Contact

Can anyone suggest an edit that will allow me to show/hide the responsive menu when clicking the hamburger menu?

Previous codepen
https://codepen.io/atgarbett/pen/wPYMoY

Working codepen
https://codepen.io/atgarbett/pen/QOZoyg