feat: nav side

components/nav/NavFooter.vue

@@ -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>

components/nav/NavSide.vue

@@ -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>

layouts/default.vue

@@ -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>

nuxt.config.ts

@@ -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': {},

styles/global.css

@@ -1,6 +1,5 @@
-
 * {
-	scrollbar-color: #555 var(--color-border);
+  scrollbar-color: #5555 var(--color-border);
 }
 
 ::-webkit-scrollbar {