1 files changed, 134 insertions, 0 deletions
diff --git a/pse-dashboard/src/components/NavBar.vue b/pse-dashboard/src/components/NavBar.vue
new file mode 100644
index 0000000..2cc36e5
--- /dev/null
+++ b/pse-dashboard/src/components/NavBar.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { store } from '@/store.js';
+</script>
+<template>
+    <nav class="navbar navbar-expand-sm bg-light">
+        <div class="container">
+            <!-- brand -->
+            <router-link
+                class="navbar-brand"
+                to="/subscriptions"
+            >
+                <img
+                    src="@/assets/logo.svg"
+                    alt=""
+                    width="200"
+                    height="45"
+                >
+            </router-link>
+
+            <!-- mobile view -->
+            <button
+                class="navbar-toggler"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#mynavbar"
+            >
+                <span class="navbar-toggler-icon" />
+            </button>
+            <div
+                id="mynavbar"
+                class="collapse navbar-collapse"
+            >
+                <!-- routes -->
+                <div class="me-auto">
+                    <ul
+                        v-if="store.isLoggedIn"
+                        class="navbar-nav"
+                    >
+                        <li class="nav-item">
+                            <router-link
+                                to="/subscriptions"
+                                class="nav-link"
+                            >
+                                {{ $t("message.podcast", {n:2}) }}
+                            </router-link>
+                        </li>
+                        <li class="nav-item">
+                            <router-link
+                                to="/episodes"
+                                class="nav-link"
+                            >
+                                {{ $t("message.mostRecentlyHeared") }}
+                            </router-link>
+                        </li>
+                    </ul>
+                </div>
+
+                <!-- right side of navbar -->
+                <div class="d-flex navbar-nav">
+                    <!-- change language -->
+                    <!-- https://vue-i18n.intlify.dev/guide/essentials/scope.html -->
+                    <div class="nav-item dropdown">
+                        <a
+                            class="nav-link dropdown-toggle"
+                            href="#"
+                            role="button"
+                            data-bs-toggle="dropdown"
+                        >
+                            <i class="fa fa-language" /> {{ $i18n.locale }}
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li 
+                                v-for="locale in $i18n.availableLocales"
+                                :key="locale"
+                            >
+                                <a
+                                    class="dropdown-item"
+                                    :class="{active: $i18n.locale == locale}"
+                                    @click="$i18n.locale = locale"
+                                >{{ locale }}</a>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!-- Help Modal -->
+                    <a
+                        href="#"
+                        class="nav-link"
+                        data-bs-toggle="modal"
+                        data-bs-target="#help"
+                    >{{ $t("message.help") }}</a>
+                    
+                    <!-- User Account -->
+                    <div
+                        v-if="store.isLoggedIn"
+                        class="nav-item dropdown"
+                    >
+                        <a
+                            href="#"
+                            class="nav-link dropdown-toggle"
+                            role="button"
+                            data-bs-toggle="dropdown"
+                        >
+                            {{ store.username || "John Doe" }} <i class="m-1 fa fa-user" />
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li>
+                                <router-link
+                                    to="/settings"
+                                    class="dropdown-item"
+                                >
+                                    {{ $t("message.settings") }}
+                                </router-link>
+                            </li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li>
+                                <router-link
+                                    to="/login"
+                                    class="dropdown-item"
+                                    @click="store.logout()"
+                                >
+                                    {{ $t("message.logout") }}
+                                </router-link>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav> 
+</template>
+<style scoped>
+</style>
+