Merge pull request #1 from teuswx/main

Implementação da barra menu
cefetmg-dv · Sep 25, 2023 · e523bbe · e523bbe
2 parents 77d6ff6 + 989a0af
commit e523bbe
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "hover.css": "^2.3.2",
     "marked": "^5.1.1",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.0.13"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.1",

diff --git a/src/comuns/BackToMenu.vue b/src/comuns/BackToMenu.vue
@@ -0,0 +1,27 @@
+<!-- ---------------------------------------------------------------------- -->
+<!-- HTML                                                                   -->
+<!-- ---------------------------------------------------------------------- -->
+<template>
+    <nav class="navbar bg-body-tertiary">
+    <form class="container-fluid mt-2" >
+      <RouterLink to="/" class="btn btn-outline-success"
+        >VOLTAR</RouterLink
+      >
+    </form>
+  </nav>
+</template>
+
+
+<!-- ---------------------------------------------------------------------- -->
+<!-- JavaScript                                                             -->
+<!-- ---------------------------------------------------------------------- -->
+<script>
+import { RouterLink, RouterView } from "vue-router";
+</script>
+
+
+<!-- ---------------------------------------------------------------------- -->
+<!-- CSS                                                                    -->
+<!-- ---------------------------------------------------------------------- -->
+<style scoped>
+</style>
diff --git a/src/views/DecksView.vue b/src/views/DecksView.vue
@@ -3,6 +3,7 @@
 <!-- ---------------------------------------------------------------------- -->
 <template>
 
+  <BackToMenu/>
   <!-- Modal para exibir detalhes do card -->
   <div id="cardModal" class="modal" tabindex="-1">
     <div class="modal-dialog modal-lg modal-fullscreen-md-down modal-dialog-centered modal-dialog-scrollable">
@@ -22,7 +23,7 @@
                   <div class="col-12 mb-3">
                     <div class="hstack gap-3">
                       <span v-if="modal.card?.genio" class="badge text-bg-success">Gênio</span>
-                      <span v-for="tag of modal.card?.tags" class="badge text-bg-primary">{{ tag }}</span>
+                      <span v-for="(tag, index) in modal.card?.tags" :key="index" class="badge text-bg-primary">{{ tag }}</span>
                     </div>
                   </div>
                   <div class="col-12" v-html="modal.card?.descricao">
@@ -39,7 +40,7 @@
   <!-- Listagem dos cards -->
   <div class="container">
     <div class="row py-5 gx-5 gy-5">
-      <div v-for="card of cards" class="col-12 col-md-3">
+      <div v-for="(card, index) in cards" :key="index" class="col-12 col-md-3">
         <Card :cardId="card.id" @click="() => { exibirModal(card.id) }" class="deck-card hvr-grow"></Card>
       </div>
     </div>
@@ -56,12 +57,14 @@ import { RouterLink, RouterView } from 'vue-router';
 import Card from '@/components/Card.vue';
 import * as bootstrap from 'bootstrap';
 import cardUtils from '@/composables/card-utils.js';
+import BackToMenu from '../comuns/BackToMenu.vue';
 
 export default {
   components: {
     RouterLink,
     RouterView,
-    Card
+    Card,
+    BackToMenu
   },
   data() {
     return {

diff --git a/src/views/JogoView.vue b/src/views/JogoView.vue
@@ -10,16 +10,19 @@ import { RouterLink, RouterView } from 'vue-router';
 <!-- HTML                                                                   -->
 <!-- ---------------------------------------------------------------------- -->
 <template>
+  <back-to-menu/>
   <div class="container-fluid">
     <div class="d-flex vh-100">
       <div class="m-auto text-center">
         <div>Jogo (em construção...)</div>
-        <RouterLink to="/" class="btn btn-secondary mt-3">VOLTAR</RouterLink>
       </div>
     </div>
   </div>
 </template>
 
+<script>
+import BackToMenu from '../comuns/BackToMenu.vue';
+</script>
 
 <!-- ---------------------------------------------------------------------- -->
 <!-- CSS                                                                    -->

diff --git a/src/views/SobreView.vue b/src/views/SobreView.vue
@@ -2,11 +2,11 @@
 <!-- HTML                                                                   -->
 <!-- ---------------------------------------------------------------------- -->
 <template>
+  <back-to-menu/>
   <div class="container-fluid">
     <div class="d-flex vh-100">
       <div class="m-auto text-center">
         <div>Sobre (em construção...)</div>
-        <RouterLink to="/" class="btn btn-secondary mt-3">VOLTAR</RouterLink>
       </div>
     </div>
   </div>
@@ -18,6 +18,7 @@
 <!-- ---------------------------------------------------------------------- -->
 <script setup>
 import { RouterLink, RouterView } from 'vue-router';
+import BackToMenu from '../comuns/BackToMenu.vue';
 </script>
 
 

diff --git a/src/views/TutorialView.vue b/src/views/TutorialView.vue
@@ -2,11 +2,11 @@
 <!-- HTML                                                                   -->
 <!-- ---------------------------------------------------------------------- -->
 <template>
+  <back-to-menu/>
   <div class="container-fluid">
     <div class="d-flex vh-100">
       <div class="m-auto text-center">
         <div>Tutorial (em construção...)</div>
-        <RouterLink to="/" class="btn btn-secondary mt-3">VOLTAR</RouterLink>
       </div>
     </div>
   </div>
@@ -18,6 +18,7 @@
 <!-- ---------------------------------------------------------------------- -->
 <script setup>
 import { RouterLink, RouterView } from 'vue-router';
+import BackToMenu from '../comuns/BackToMenu.vue';
 </script>