Move Navigation from NavDrawer to AppBar, redesign page structure and routes

software/src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { i18n } from './plugins/i18n';
-import { ref, watch } from 'vue';
-import vuetify from './plugins/vuetify';
-import navigationItems from './components/navigationItems.vue';
+import { watch } from 'vue';
+import navigationAppendItems from './components/navigation/navigationAppendItems.vue';
+import navigationPrependItems from './components/navigation/navigationPrependItems.vue';
 import { usePreferencesStore } from './data/stores/preferencesStore';
 import { useFeedbackStore } from './data/stores/feedbackStore';
 import { useTourStore } from './data/stores/tourStore';
@@ -11,8 +11,8 @@ import { useTourStore } from './data/stores/tourStore';
 const preferencesStore = usePreferencesStore()
 const tourStore = useTourStore()
 const feedbackStore = useFeedbackStore()
+
 const theme = useTheme()
-const navRail = ref(vuetify.display.mobile)
 
 theme.global.name.value = preferencesStore.theme
 
@@ -26,15 +26,20 @@ watch(() => preferencesStore.language, () => {
 
 <template>
   <v-app>
-    <v-app-bar>
-      <v-app-bar-nav-icon @click="navRail = !navRail" />
+    <v-app-bar
+      height="80"
+      color="primary" 
+      class="px-5"
+    >
+      <template #prepend>
+        <navigation-prepend-items />
+      </template>
 
-      <v-app-bar-title>HackMyCart</v-app-bar-title>
+      <template #append>
+        <navigation-append-items />
+      </template>
     </v-app-bar>
 
-    <v-navigation-drawer :rail="navRail" permanent>
-      <navigation-items v-model:nav-rail="navRail" />
-    </v-navigation-drawer>
 
     <v-main>
       <!-- Snackbar in the top right corner for user feedback -->
@@ -58,7 +63,9 @@ watch(() => preferencesStore.language, () => {
       </v-snackbar>
 
       <!-- Here changes the router the content -->
-      <router-view></router-view>
+      <v-container max-width="1200">
+        <router-view></router-view>
+      </v-container>
     </v-main>
   </v-app>
 </template>

software/src/components/navigation/navigationAppendItems.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useAccountStore } from '@/data/stores/accountStore';
+import router from '@/plugins/router';
+
+const accountStore = useAccountStore()
+
+function startSearch() {
+  // todo
+  router.push("/shows/search")
+}
+</script>
+
+<template>
+  <v-text-field
+    variant="outlined"
+    append-inner-icon="mdi-magnify"
+    density="compact"
+    class="mt-5 mr-5"
+    @click:append-inner="startSearch"
+    width="400"
+  />
+
+  <v-btn v-if="accountStore.userAccount.id == 0" variant="plain" icon="mdi-account" to="/account/login" />
+  <v-btn v-else variant="plain" icon="mdi-account" to="/account/home" />
+
+  <v-btn variant="plain" icon="mdi-cart" to="/basket" />
+  <v-btn variant="plain" icon="mdi-help" to="/system/help" />
+  <v-btn variant="plain" icon="mdi-cog" to="/system/preferences"/>
+</template>

software/src/components/navigation/navigationPrependItems.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <v-app-bar-title class="pr-5">
+    <!-- todo: Brand logo -->
+    <v-btn variant="plain" to="/" flat>HackMyCart</v-btn>
+  </v-app-bar-title>
+
+  <v-divider vertical />
+
+  <v-btn
+    to="/shows/events"
+    prepend-icon="mdi-ticket"
+    height="100%"
+    :rounded="false"
+  >
+    {{ $t('menu.shopping.allEvents', 2) }}
+  </v-btn>
+
+  <v-divider vertical />
+
+
+  <v-btn
+    variant="text"
+    to="/shows/locations"
+    prepend-icon="mdi-city"
+    height="100%"
+    :rounded="false"
+  >
+    {{ $t('menu.shopping.allLocations', 2) }}
+  </v-btn>
+
+  <v-divider vertical />
+
+
+  <v-btn
+    variant="text"
+    to="/shows/genres"
+    prepend-icon="mdi-music-clef-treble"
+    height="100%"
+    :rounded="false"
+  >
+    {{ $t('menu.shopping.allGenres', 2) }}
+  </v-btn>
+
+  <v-divider vertical />
+</template>

software/src/locales/de.json

@@ -1,8 +1,9 @@
 {
   "menu": {
     "shopping": {
-      "shopping": "Einkaufen",
-      "ticket": "Ticket | Tickets",
+      "allEvents": "Alle Events",
+      "allLocations": "Alle Orte",
+      "allGenres": "Alle Genres",
       "basket": "Warenkorb"
     },
     "account": {

software/src/locales/en.json

@@ -1,8 +1,9 @@
 {
   "menu": {
     "shopping": {
-      "shopping": "Shopping",
-      "ticket": "Ticket | Tickets",
+      "allEvents": "All Events",
+      "allLocations": "All Locations",
+      "allGenres": "All Genres",
       "basket": "Basket"
     },
     "account": {

software/src/pages/account/accountDataPage/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import alertBanner from '@/components/alertBanner.vue';
 import accountDataCard from './accountDataCard.vue';
 import accountManagingCard from './accountManagingCard.vue';
 import addressesCard from './addressesCard.vue';

software/src/pages/account/accountHomePage/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Account Home
+
+  <v-btn to="/account/edit" >Account Data</v-btn>
+
+  <v-btn to="/account/orders" >Orders</v-btn>
+</template>

software/src/pages/homePage/index.vue

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  Help
+  Home
 </template>

software/src/pages/shows/eventsPage/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Events
+</template>

software/src/pages/shows/genresPage/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Genres
+</template>

software/src/pages/shows/locationsPage/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Locations
+</template>

software/src/pages/shows/searchPage/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  Search
+</template>

software/src/plugins/vuetify.ts

@@ -20,7 +20,7 @@ const vuetify = createVuetify({
           secondary: colors.red.lighten2
         }
       },
-            lightRed: {
+      lightRed: {
         dark: false,
         colors: {
           primary: colors.red.darken1,
@@ -30,7 +30,7 @@ const vuetify = createVuetify({
       darkBlue: {
         dark: true,
         colors: {
-          primary: colors.blue.darken1,
+          primary: colors.blue.darken4,
           secondary: colors.blue.lighten2
         }
       },

software/src/router/account.routes.ts

@@ -0,0 +1,11 @@
+import AccountHomePage from "@/pages/account/accountHomePage/index.vue";
+import AccountDataPage from "@/pages/account/accountDataPage/index.vue";
+import OrdersPage from "@/pages/account/ordersPage/index.vue";
+import LoginPage from "@/pages/account/loginPage/index.vue"
+
+export const accountRoutes = [
+  { path: '/account/home', component: AccountHomePage },
+  { path: '/account/login', component: LoginPage },
+  { path: '/account/edit', component: AccountDataPage },
+  { path: '/account/orders', component: OrdersPage },
+]

software/src/router/admin.routes.ts

@@ -4,7 +4,7 @@ import AccountsPage from "@/pages/admin/accountsPage/index.vue"
 import ProductsPage from "@/pages/admin/productsPage/index.vue"
 import BrandsPage from "@/pages/admin/brandsPage/index.vue"
 
-export default [
+export const adminRoutes = [
   {
     path: '/admin/dashboard',
     component: DashboardPage

software/src/router/routes.ts

@@ -1,23 +1,17 @@
-import AccountPage from "@/pages/accountPage/index.vue";
-import OrdersPage from "@/pages/ordersPage/index.vue";
-import PreferencesPage from "@/pages/preferencesPage/index.vue";
-import TourPage from "@/pages/toursPage/index.vue";
-import LoginPage from "@/pages/loginPage/index.vue"
 import BasketPage from "@/pages/basketPage/index.vue"
-import HelpPage from "@/pages/helpPage/index.vue"
-import ScoreBoardPage from "@/pages/scoreBoardPage/index.vue"
-import adminRoutes from "./admin.routes";
+import HomePage from "@/pages/homePage/index.vue"
+import { adminRoutes } from "./admin.routes";
+import { accountRoutes } from "./account.routes";
+import { showRoutes } from "./show.routes";
+import { systemRoutes } from "./system.routes";
 
 const routes = [
-  { path: '/', component: TourPage },
-  { path: '/account', component: AccountPage },
-  { path: '/orders', component: OrdersPage },
-  { path: '/preferences', component: PreferencesPage },
-  { path: '/login', component: LoginPage },
+  { path: "/", component: HomePage },
   { path: '/basket', component: BasketPage },
-  { path: '/scoreboard', component: ScoreBoardPage },
-  { path: '/help', component: HelpPage },
-  ...adminRoutes
+  ...showRoutes,
+  ...accountRoutes,
+  ...adminRoutes,
+  ...systemRoutes
 ]
 
 export default routes

software/src/router/show.routes.ts

@@ -0,0 +1,11 @@
+import EventsPage from "@/pages/shows/eventsPage/index.vue";
+import GenresPage from "@/pages/shows/genresPage/index.vue";
+import LocationsPage from "@/pages/shows/locationsPage/index.vue"
+import SearchPage from "@/pages/shows/searchPage/index.vue"
+
+export const showRoutes = [
+  { path: '/shows/events', component: EventsPage },
+  { path: '/shows/genres', component: GenresPage },
+  { path: '/shows/locations', component: LocationsPage },
+  { path: '/shows/search', component: SearchPage },
+]

software/src/router/system.routes.ts

@@ -0,0 +1,7 @@
+import PreferencesPage from "@/pages/system/preferencesPage/index.vue";
+import HelpPage from "@/pages/system/helpPage/index.vue"
+
+export const systemRoutes = [
+  { path: '/system/preferences', component: PreferencesPage },
+  { path: '/system/help', component: HelpPage }
+]