74 lines
1.9 KiB
TypeScript
74 lines
1.9 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-admin-nav': true,
|
|
'ex-admin-nav_expanded': expanded.value,
|
|
}));
|
|
|
|
const logout = () => {
|
|
setMe(null);
|
|
useGqlToken({
|
|
token: null,
|
|
config: { type: 'Bearer' },
|
|
});
|
|
};
|
|
|
|
return () => (
|
|
<nav class={classes.value}>
|
|
<button
|
|
class="ex-admin-nav--toggle"
|
|
type="button"
|
|
onClick={() => toggle()}
|
|
aria-label="Toggle"
|
|
>
|
|
<font-awesome-icon
|
|
icon={`fa-solid fa-arrow-${expanded.value ? 'left' : 'right'}`}
|
|
/>
|
|
</button>
|
|
<ul class="ex-admin-nav--menu">
|
|
<li class="ex-admin-nav--menu-item">
|
|
<NuxtLink
|
|
class="ex-admin-nav--menu-item-action"
|
|
to="/"
|
|
>
|
|
<font-awesome-icon
|
|
class="ex-admin-nav--menu-item-icon"
|
|
icon="fa-solid fa-home"
|
|
/>
|
|
<span class="ex-admin-nav--menu-item-title">Website</span>
|
|
</NuxtLink>
|
|
</li>
|
|
|
|
<li class="ex-admin-nav--menu-spacer"></li>
|
|
|
|
<li class="ex-admin-nav--menu-item">
|
|
<button
|
|
type="button"
|
|
class="ex-admin-nav--menu-item-action"
|
|
onClick={() => logout()}
|
|
>
|
|
<font-awesome-icon
|
|
class="ex-admin-nav--menu-item-icon"
|
|
icon="fa-solid fa-right-from-bracket"
|
|
/>
|
|
<span class="ex-admin-nav--menu-item-title">Logout</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
);
|
|
},
|
|
});
|