From 94bde9487a4e5f7b887e32964a03869788f67b37 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 16 Nov 2022 01:14:10 +0800
Subject: [PATCH] feat: nav side

---
 components/nav/NavFooter.vue | 13 ++++++++++++
 components/nav/NavSide.vue   | 40 ++++++++++++++++++++++++++++++++++++
 composables/time.ts          |  0
 layouts/default.vue          |  7 +++++--
 nuxt.config.ts               |  5 +++++
 styles/global.css            | 19 ++++++++---------
 6 files changed, 72 insertions(+), 12 deletions(-)
 create mode 100644 components/nav/NavFooter.vue
 create mode 100644 components/nav/NavSide.vue
 create mode 100644 composables/time.ts

diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
new file mode 100644
index 00000000..c0487bca
--- /dev/null
+++ b/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>
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
new file mode 100644
index 00000000..fa736904
--- /dev/null
+++ b/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>
diff --git a/composables/time.ts b/composables/time.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/layouts/default.vue b/layouts/default.vue
index f361970a..43f97468 100644
--- a/layouts/default.vue
+++ b/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>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 12bfb981..cda81c77 100644
--- a/nuxt.config.ts
+++ b/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': {},
diff --git a/styles/global.css b/styles/global.css
index da553ef9..949a7f04 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,26 +1,25 @@
-
 * {
-	scrollbar-color: #555 var(--color-border);
+  scrollbar-color: #5555 var(--color-border);
 }
 
 ::-webkit-scrollbar {
-	width: 10px;
+  width: 10px;
 }
 
 ::-webkit-scrollbar:horizontal {
-	height: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-	background: var(--color-border);
-	border-radius: 1px;
+  background: var(--color-border);
+  border-radius: 1px;
 }
 
 ::-webkit-scrollbar-thumb {
-	background: #555;
-	border-radius: 1px;
+  background: #555;
+  border-radius: 1px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-	background: #666;
-}
\ No newline at end of file
+  background: #666;
+}