Create product cards, display all on products page

software/src/App.vue

@@ -3,17 +3,18 @@ import { ref } from 'vue';
 import axios from 'axios';
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { useUserStore } from './data/stores/userStore';
+import vuetify from './plugins/vuetify';
 
 const userStore = useUserStore()
 const categories = ref([])
 const theme = useTheme()
+const navRail = ref(vuetify.display.mobile)
 
 theme.global.name.value = userStore.theme
 
 function requestAllCategories() {
   axios.get('http://127.0.0.1:3000/categories')
     .then(function (response) {
-      console.log(response)
       categories.value = response.data
     })
 }
@@ -24,33 +25,46 @@ requestAllCategories()
 <template>
   <v-app>
     <v-app-bar>
-      <v-app-bar-nav-icon />
+      <v-app-bar-nav-icon @click="navRail = !navRail" />
 
       <v-app-bar-title>HackMyCart</v-app-bar-title>
     </v-app-bar>
 
-    <v-navigation-drawer permanent>
+    <v-navigation-drawer :rail="navRail" permanent>
       <v-list>
-        <v-list-subheader>Shop Kategorien</v-list-subheader>
-        <v-list-item v-for="category in categories" link :prepend-icon="category.icon" to="/">
-          {{ category.name }}
-        </v-list-item>
+        <v-list-subheader>
+          <div v-if="!navRail">Einkaufen</div>
+          <div v-else></div>
+        </v-list-subheader>
+        <v-list-item title="Produkte" prepend-icon="mdi-store" to="/products" link />
+        <v-list-item title="Warenkorb" prepend-icon="mdi-cart" to="/basket" link />
 
-        <v-list-subheader>Account</v-list-subheader>
+        <v-divider />
+
+        <v-list-subheader>
+          <div v-if="!navRail">Account</div>
+          <div v-else></div>
+        </v-list-subheader>
         <v-list-item title="Login" prepend-icon="mdi-login" to="/login" link />
         <v-list-item title="Account" prepend-icon="mdi-account" to="/account" link />
         <v-list-item title="Bestellungen" prepend-icon="mdi-cart-check" to="/orders" link />
 
-        <v-list-subheader>System & Hilfe</v-list-subheader>
+        <v-divider />
+        
+        <v-list-subheader>
+          <div v-if="!navRail">System & Hilfe</div>
+          <div v-else></div>
+        </v-list-subheader>
+        <v-list-item title="Hilfestellung" prepend-icon="mdi-chat-question" to="/help" link />
         <v-list-item title="Einstellungen" prepend-icon="mdi-cog" to="/preferences" link />
       </v-list>
     </v-navigation-drawer>
 
     <v-main>
-      <!-- Here changes the router the content -->
       <v-container>
         <v-row>
           <v-col>
+            <!-- Here changes the router the content -->
             <router-view></router-view>
           </v-col>
         </v-row>