Merge pull request #53 from bcc-code/feat/toolbar

Feat/toolbar (follow up on #44)

src/App.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useAuth0 } from "@auth0/auth0-vue";
-import { watch } from "vue";
+import { Ref, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import privatePlaylist from "@/components/privatePlaylist.vue";
 import ChangeLocale from "./components/ChangeLocale.vue";
+import Toolbar from "./components/AppToolbar.vue";
 
 // logout
 const { isLoading, loginWithRedirect, isAuthenticated } = useAuth0();
@@ -12,36 +14,44 @@ watch(isLoading, async (loading) => {
     await loginWithRedirect();
   }
 });
+
+const navLinks: Ref<{ to: string; name: string }[]> = ref([]);
+const { locale, t } = useI18n();
+watch(
+  locale,
+  () => {
+    navLinks.value = [
+      { to: "/", name: t("nav.home") },
+      { to: "/browse", name: t("nav.browse") },
+      { to: "/search", name: t("nav.search") },
+    ];
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
   <div class="flex">
-    <nav>
+    <nav
+      class="bg-gray-50 border-r border-gray-100 p-4 sticky top-0 h-screen min-w-[200px]"
+    >
       <change-locale />
-      <router-link to="/">{{ $t("nav.home") }}</router-link>
-      <router-link to="/browse">{{ $t("nav.browse") }}</router-link>
-      <router-link to="/search">{{ $t("nav.search") }}</router-link>
+      <router-link
+        v-for="link in navLinks"
+        :key="link.name"
+        :to="link.to"
+        class="p-2 rounded-lg flex"
+        active-class="bg-lime-400"
+      >
+        {{ link.name }}
+      </router-link>
       <privatePlaylist v-if="isAuthenticated" />
     </nav>
-    <main class="overflow-scroll p-5">
-      <router-view v-if="isAuthenticated" />
-    </main>
+    <div class="grow">
+      <Toolbar />
+      <main class="p-5 grow">
+        <router-view v-if="isAuthenticated" />
+      </main>
+    </div>
   </div>
 </template>
-
-<style scoped>
-nav a {
-  display: block;
-  color: black;
-  font-style: normal;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 24px;
-  padding: 12px;
-}
-
-nav a.router-link-active {
-  background: #a4e16a;
-  border-radius: 12px;
-}
-</style>

src/components/AppToolbar.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+// TODO: Replace placeholder by profile menu #8
+const showMenu = ref(false);
+function toggleMenu() {
+  showMenu.value = !showMenu.value;
+}
+</script>
+
+<template>
+  <header
+    class="py-4 px-5 sticky top-0 bg-white/80 backdrop-blur-lg border-b border-gray-100 leading-none flex justify-between align-center"
+  >
+    <strong>{{ route.meta.toolbarTitle?.value }}</strong>
+    <div class="relative">
+      <button @click="toggleMenu">{{ $t("nav.profile") }}</button>
+      <div
+        v-if="showMenu"
+        class="p-2 rounded-lg border border-gray-100 bg-white absolute"
+      >
+        test
+      </div>
+    </div>
+  </header>
+</template>

src/components/privatePlaylist.vue

@@ -17,7 +17,7 @@ new TrackCollectionApi()
 
 <template>
   <div>
-    <h3>Playlists</h3>
+    <h3>{{ $t("nav.playlist") }}</h3>
     <ul>
       <li v-for="collection in collections" :key="collection.id || 0">
         <RouterLink

src/locales/de.json

@@ -2,6 +2,8 @@
   "nav": {
     "home": "Start",
     "browse": "Stöbern",
+    "playlist": "Playliste",
+    "profile": "Profil",
     "search": "Suche"
   },
   "error": {

src/locales/en.json

@@ -2,6 +2,8 @@
   "nav": {
     "home": "Home",
     "browse": "Browse",
+    "playlist": "Playlist",
+    "profile": "Profile",
     "search": "Search"
   },
   "error": {

src/plugins/i18n.ts

@@ -51,7 +51,8 @@ const i18n = createI18n<
   | "sl"
   | "tr"
   | "uk"
-  | "zh"
+  | "zh",
+  false
 >({
   legacy: false,
   locale: "en",

src/router.ts

@@ -1,31 +1,65 @@
+import { Ref, ref, watch } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
+import i18n from "./plugins/i18n";
+
+declare module "vue-router" {
+  interface RouteMeta {
+    toolbarTitle: Ref<string>;
+  }
+}
+
+const { locale, t } = i18n.global;
+const reactiveTranslation: (translate: () => string) => Ref<string> = (
+  translate
+) => {
+  const translation: Ref<string> = ref(translate());
+  watch(locale, () => {
+    translation.value = translate();
+  });
+  return translation;
+};
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
     {
       path: "/",
       component: () => import("@/views/HomeView.vue"),
+      meta: {
+        toolbarTitle: reactiveTranslation(() => t("nav.home")),
+      },
     },
     {
       path: "/browse",
       component: () => import("@/views/BrowseView.vue"),
+      meta: {
+        toolbarTitle: reactiveTranslation(() => t("nav.browse")),
+      },
     },
     {
       path: "/search",
       component: () => import("@/views/SearchView.vue"),
+      meta: {
+        toolbarTitle: reactiveTranslation(() => t("nav.search")),
+      },
     },
     {
       name: "CuratedPlaylistDetails",
       path: "/playlist/curated/:playlistId",
       component: () => import("@/views/Playlist/CuratedPlaylistDetails.vue"),
       props: true,
+      meta: {
+        toolbarTitle: reactiveTranslation(() => t("nav.playlist")),
+      },
     },
     {
       name: "PrivatePlaylist",
       path: "/playlist/private/:id",
       component: () => import("@/views/Playlist/PrivatePlaylist.vue"),
       props: true,
+      meta: {
+        toolbarTitle: reactiveTranslation(() => t("nav.playlist")),
+      },
     },
     {
       name: "error",

src/style.css

@@ -1,96 +1,3 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body,
-html {
-  margin: 0;
-  height: 100%;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-h2 {
-  padding-left: 20px;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-}
-nav {
-  flex-basis: 200px;
-  flex-shrink: 0;
-  background: #f5f6f7;
-  border-right: 1px solid rgba(129, 136, 143, 0.1);
-  padding: 12px;
-  padding-top: 30px;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/views/Playlist/CuratedPlaylistDetails.vue

@@ -29,7 +29,7 @@ new PlaylistApi()
 </script>
 
 <template>
-  <h1>Playlist</h1>
+  <h1>{{ $t("nav.playlist") }}</h1>
   <div class="flex flex-row flex-wrap">
     <ProtectedImage
       v-if="playlist.cover"

tailwind.config.cjs

@@ -2,6 +2,9 @@
 module.exports = {
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {
+    fontFamily: {
+      sans: ["Inter", "Avenir", "Helvetica", "Arial", "sans-serif"],
+    },
     extend: {},
   },
   plugins: [],

tsconfig.node.json

@@ -9,5 +9,5 @@
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts", "stylelint.config.cjs"]
+  "include": ["vite.config.ts", "stylelint.config.cjs", "tailwind.config.cjs"]
 }