feat: nav side
This commit is contained in:
parent
49a20c01b7
commit
94bde9487a
13
components/nav/NavFooter.vue
Normal file
13
components/nav/NavFooter.vue
Normal file
|
@ -0,0 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
|
||||
// @ts-ignore build time
|
||||
const buildTime = __BUILD_TIME__
|
||||
const buildTimeAgo = useTimeAgo(buildTime)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div p4 text-sm op25>
|
||||
A Mastodon client powered by Nuxt<br>
|
||||
Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/nuxtodon" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</template>
|
40
components/nav/NavSide.vue
Normal file
40
components/nav/NavSide.vue
Normal file
|
@ -0,0 +1,40 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div px6 py2 flex="~ col gap6" text-lg>
|
||||
<NuxtLink flex gap2 items-center to="/home">
|
||||
<div i-ri:home-5-line />
|
||||
<span>Home</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink flex gap2 items-center to="/notifications">
|
||||
<div i-ri:notification-4-line />
|
||||
<span>Notifications</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink flex gap2 items-center>
|
||||
<div i-ri:hashtag />
|
||||
<span>Explore</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink flex gap2 items-center to="/public/local">
|
||||
<div i-ri:group-2-line />
|
||||
<span>Local</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink flex gap2 items-center to="/public">
|
||||
<div i-ri:earth-line />
|
||||
<span>Federated</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink flex gap2 items-center>
|
||||
<div i-ri:at-line />
|
||||
<span>Direct Messages</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink flex gap2 items-center>
|
||||
<div i-ri:heart-3-line />
|
||||
<span>Favorites</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink flex gap2 items-center>
|
||||
<div i-ri:home-5-line />
|
||||
<span>Bookmarks</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
0
composables/time.ts
Normal file
0
composables/time.ts
Normal file
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div h-full of-hidden>
|
||||
<main grid="~ lg:cols-[1fr_40rem_1fr]" h-full>
|
||||
<main grid="~ lg:cols-[1fr_40rem_18rem]" h-full>
|
||||
<div>
|
||||
<slot name="left">
|
||||
<NavTitle p4 />
|
||||
|
@ -9,9 +9,12 @@
|
|||
<div h-full of-auto border="l r border">
|
||||
<slot />
|
||||
</div>
|
||||
<div>
|
||||
<div flex="~ col">
|
||||
<slot name="right">
|
||||
<AccountMe />
|
||||
<NavSide border="y border" py8 />
|
||||
<div flex-auto />
|
||||
<NavFooter />
|
||||
</slot>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
@ -20,6 +20,11 @@ export default defineNuxtConfig({
|
|||
alias: {
|
||||
querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
|
||||
},
|
||||
vite: {
|
||||
define: {
|
||||
__BUILD_TIME__: JSON.stringify(new Date().toISOString()),
|
||||
},
|
||||
},
|
||||
postcss: {
|
||||
plugins: {
|
||||
'postcss-nested': {},
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
|
||||
* {
|
||||
scrollbar-color: #555 var(--color-border);
|
||||
scrollbar-color: #5555 var(--color-border);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
Loading…
Reference in a new issue