web/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ActionToolbar: typeof import('./src/components/actionToolbar.vue')['default']
     CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
     HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
     ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']

web/src/App.vue

@@ -7,6 +7,7 @@
       <div v-else>
         <HeaderBar />
         <div class="ma-8">
+          <actionToolbar />
           <li>
             <CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
             <CategoryContainer licenseGroupName="Microsoft"/>
@@ -21,6 +22,7 @@
 <script setup lang="ts">
 import HeaderBar from './components/HeaderBar.vue';
 import CategoryContainer from './components/CategoryContainer.vue';
+import actionToolbar from './components/actionToolbar.vue';
 import { store } from './store';
 
 

web/src/components/HeaderBar.vue

@@ -19,7 +19,7 @@
           clearable
           rounded="pill"
         ></v-text-field>
-      <v-btn icon variant="outlined" @click="handlelogout">
+      <v-btn icon variant="outlined" >
         <LogOut />
       </v-btn>
     </v-toolbar>
@@ -29,14 +29,6 @@
 
 <script setup lang="ts">
 import { LogOut } from 'lucide-vue-next';
-import { store } from '@/store';
-
-
-function handlelogout() {
-  console.log('logout');
-  store.setToken(null);
-}
-
 </script>
 
 <style scoped>

web/src/components/actionToolbar.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-card flat>
+    <v-container fluid>
+      <v-row class="child-flex">
+        <div>
+          <v-toolbar>
+            <v-btn
+              class="hidden-xs-only"
+              icon
+            >
+              <v-icon>mdi-arrow-left</v-icon>
+            </v-btn>
+
+            <v-toolbar-title>Title</v-toolbar-title>
+
+            <v-spacer></v-spacer>
+
+            <v-btn
+              class="hidden-xs-only"
+              icon
+            >
+              <v-icon>mdi-magnify</v-icon>
+            </v-btn>
+          </v-toolbar>
+        </div>
+
+        <div style="flex-basis: 20%">
+          <v-toolbar dark>
+            <v-spacer></v-spacer>
+
+            <v-btn icon>
+              <v-icon>mdi-reply</v-icon>
+            </v-btn>
+
+            <v-btn icon>
+              <v-icon>mdi-dots-vertical</v-icon>
+            </v-btn>
+          </v-toolbar>
+        </div>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
+
+
+