chore: add app navigation

src/App.vue

@@ -1,11 +1,17 @@
 <template>
-  <RouterView></RouterView>
+  <AppNavigation />
+  <RouterView />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
+import AppNavigation from './components/layout/Navigation/index.vue'
+
 export default defineComponent({
   name: 'App',
+  components: {
+    AppNavigation
+  },
 })
 </script>

src/components/layout/Navigation/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <nav class="navbar navbar-light">
+    <div class="container">
+      <a
+        class="navbar-brand"
+        href="index.html"
+      >
+        conduit
+      </a>
+
+      <!-- FOR TEST, remove after user auth logic will be implemented -->
+      <button @click="isUserAuthorized=!isUserAuthorized">
+        Authorized: {{ isUserAuthorized }}
+      </button>
+
+      <ul class="nav navbar-nav pull-xs-right">
+        <li
+          v-for="link in navLinks"
+          :key="link.to"
+          class="nav-item"
+        >
+          <RouterLink
+            class="nav-link"
+            active-class="active"
+            :to="link.to"
+          >
+            <i
+              v-if="link.icon"
+              :class="link.icon"
+            /> {{ link.title }}
+          </RouterLink>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+import useLinks from './links'
+
+export default defineComponent({
+  name: 'AppNavigation',
+  setup() {
+    const isUserAuthorized = ref(false)
+
+    const {navLinks} = useLinks({isUserAuthorized})
+
+    return {
+      isUserAuthorized,
+      navLinks,
+    }
+  },
+})
+</script>

src/components/layout/Navigation/links.ts

@@ -0,0 +1,33 @@
+import { computed, Ref } from 'vue'
+
+interface UseLinksProps {
+  isUserAuthorized: Ref<boolean>
+}
+
+interface NavLink {
+  to: string
+  title: string
+  icon?: string
+  display: 'all' | 'anonym' | 'authorized'
+}
+
+export default function useLinks({isUserAuthorized}: UseLinksProps) {
+  const displayStatus= computed(() => isUserAuthorized.value ? 'anonym' : 'authorized')
+  
+  const allNavLinks: NavLink[] = [
+    {to: '/', title: 'Home', display: 'all'},
+    {to: '/login', title: 'Sign in', display: 'anonym'},
+    {to: '/register', title: 'Sign up', display: 'anonym'},
+    {to: '/editor', title: 'New Post', display: 'authorized', icon: 'ion-compose'},
+    {to: '/settings', title: 'Settings', display: 'authorized', icon: 'ion-gear-a'},
+    {to: '/profile/USERNAME', title: 'USERNAME', display: 'authorized'},
+  ]
+
+  const navLinks = computed(() => allNavLinks.filter(
+    l => l.display == displayStatus.value || l.display == 'all'
+  ))
+
+  return {
+    navLinks,
+  }
+}