68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { defineComponent } from 'vue';
|
|
import { NuxtLink } from '#components';
|
|
|
|
import './Nav.scss';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const { setMe } = useMe();
|
|
|
|
const expanded = useState(() => false);
|
|
const toggle = () => {
|
|
expanded.value = !expanded.value;
|
|
};
|
|
|
|
const classes = computed(() => ({
|
|
'ex-edit-nav': true,
|
|
'ex-edit-nav_expanded': expanded.value,
|
|
}));
|
|
|
|
const logout = () => {
|
|
setMe(null);
|
|
useGqlToken({
|
|
token: null,
|
|
config: { type: 'Bearer' },
|
|
});
|
|
};
|
|
|
|
return () => (
|
|
<nav class={classes.value}>
|
|
<button
|
|
class="ex-edit-nav--toggle"
|
|
type="button"
|
|
onClick={() => toggle()}
|
|
aria-label="Toggle"
|
|
>
|
|
{expanded.value
|
|
? <Icon name="icon-park-solid:expand-right" class="ex-edit-nav--menu-item-icon" />
|
|
: <Icon name="icon-park-solid:expand-left" class="ex-edit-nav--menu-item-icon" />}
|
|
</button>
|
|
<ul class="ex-edit-nav--menu">
|
|
<li class="ex-edit-nav--menu-item">
|
|
<NuxtLink
|
|
class="ex-edit-nav--menu-item-action"
|
|
to="/"
|
|
>
|
|
<Icon name="mdi:web" class="ex-edit-nav--menu-item-icon" />
|
|
<span class="ex-edit-nav--menu-item-title">Website</span>
|
|
</NuxtLink>
|
|
</li>
|
|
|
|
<li class="ex-edit-nav--menu-spacer"></li>
|
|
|
|
<li class="ex-edit-nav--menu-item">
|
|
<button
|
|
type="button"
|
|
class="ex-edit-nav--menu-item-action"
|
|
onClick={() => logout()}
|
|
>
|
|
<Icon name="mdi:logout" class="ex-edit-nav--menu-item-icon" />
|
|
<span class="ex-edit-nav--menu-item-title">Logout</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
);
|
|
},
|
|
});
|