Merge pull request #257 from kubero-dev/feature/improve-app-detail-navigation

Feature / Add navigation burger menu list

Author: mms-gianni

client/src/components/apps/detail.vue

@@ -9,12 +9,49 @@
                 <v-tab class="background">Vulnerabilities</v-tab>
                 <v-spacer  class="background"></v-spacer>
             </v-tabs>
-            <v-btn
-                elevation="2"
+
+
+            <v-menu offset-y>
+            <template v-slot:activator="{ on, attrs }">
+                <v-btn
                 color="primary"
-                :href="`#/pipeline/${this.pipeline}/${this.phase}/${this.app}`"
-                >Edit App
-            </v-btn>
+                dark
+                v-bind="attrs"
+                v-on="on"
+                >
+                        <v-icon color="white">mdi-menu-open</v-icon>
+                Actions
+                </v-btn>
+            </template>
+            <v-list>
+                <v-list-item-group>
+                    <v-list-item
+                        @click="ActionEditApp">
+                        <v-list-item-icon>
+                            <v-icon small>mdi-pencil</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-content>
+                            <v-list-item-title>Edit App</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                    <v-list-item
+                        @click="ActionOpenApp">
+                        <v-list-item-icon>
+                            <v-icon small>mdi-open-in-new</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-title>Open App</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item 
+                        disabled
+                        @click="ActionStartDownload">
+                        <v-list-item-icon>
+                            <v-icon small>mdi-download</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-title>Download Config</v-list-item-title>
+                    </v-list-item>
+                </v-list-item-group>
+            </v-list>
+            </v-menu>
         </v-container>
 
         <v-tabs-items v-model="tab">
@@ -92,6 +129,15 @@ export default {
                 this.appData = response.data;
             });
         },
+        ActionOpenApp() {
+            window.open(`https://app.${this.appData.spec.domain}`, '_blank');
+        },
+        ActionEditApp() {
+            this.$router.push(`/pipeline/${this.pipeline}/${this.phase}/${this.app}`);
+        },
+        ActionStartDownload() {
+            console.log("ActionStartDownload");
+        }
     },
 
     components: {
@@ -115,4 +161,14 @@ export default {
       }
     },
 }
-</script>
+</script>
+
+<style scoped>
+.v-list-item__icon:first-child {
+    margin-right: 0px;
+    margin: 10px
+}
+.v-list-item {
+    min-height: 32px;
+}
+</style>