Initial commit

frontend/src/components/AppNavigation.vue

@@ -0,0 +1,78 @@
+<template>
+  <nav>
+    <ul>
+      <li v-for="item in menuItems" :key="item.text">
+        <a href="#">{{ $t(`navigation.${item.text}`) }}</a>
+        <ul v-if="item.submenu">
+          <li v-for="subitem in item.submenu" :key="subitem.text">
+            <a href="#">{{ $t(`navigation.${subitem.text}`) }}</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <div class="right-block">
+      <button @click="accessMailbox">{{ $t('navigation.mailbox') }}</button>
+      <button @click="logout">{{ $t('navigation.logout') }}</button>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'AppNavigation',
+  data() {
+    return {
+      menuItems: [
+        { text: 'home' },
+        { text: 'about', submenu: [{ text: 'team' }, { text: 'company' }] },
+        { text: 'services', submenu: [{ text: 'consulting' }, { text: 'development' }] }
+      ]
+    };
+  },
+  methods: {
+    accessMailbox() {
+      alert('Accessing Mailbox...');
+    },
+    logout() {
+      this.$store.dispatch('logout');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/styles.scss';
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  background-color: #343a40;
+  color: white;
+  padding: 10px;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  margin: 5px 0;
+}
+a {
+  color: white;
+  text-decoration: none;
+}
+.right-block {
+  display: flex;
+  gap: 10px;
+}
+button {
+  background-color: #495057;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #6c757d;
+}
+</style>