import { defineComponent } from 'vue';
import { NuxtLink } from '~~/.nuxt/components';

import './Nav.scss';

export default defineComponent({
  setup() {
    const expanded = useState(() => false);
    const toggle = () => {
      expanded.value != expanded.value;
    };

    const classes = computed(() => ({
      'ex-admin-nav': true,
      'ex-admin-nav_expanded': expanded.value,
    }));

    return () => (
      <nav
        class={classes.value}
      >
        <button
          class="ex-admin-nav--toggle"
          type="button"
          onClick={() => toggle()}
        >Toggle</button>
        <ul class="ex-admin-nav--menu">
          <li class="ex-admin-nav--menu-item">
            <NuxtLink to="/">Logout</NuxtLink>
          </li>
        </ul>
      </nav>
    );
  },
});