fix Navbar

package.json

@@ -23,6 +23,8 @@
     "moment": "^2.29.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.20",
+    "primeicons": "^6.0.1",
+    "primevue": "^3.23.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45",
     "vue-axios": "^3.5.2",

src/assets/google.css

@@ -0,0 +1,11 @@
+/* import Google font icon */
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+/* icon default set */
+.material-symbols-outlined {
+  font-variation-settings:
+  'FILL' 0,
+  'wght' 400,
+  'GRAD' 0,
+  'opsz' 40
+}

src/assets/main.css

@@ -1,2 +1,3 @@
-@import './tailwind.css';
 @import './components.css';
+@import './tailwind.css';
+@import './google.css';

src/components/Navbar.vue

@@ -3,12 +3,19 @@
     <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
       <div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
         <div class="flex flex-1 items-center">
-            <h2 class="mr-28 text-2xl font-black text-neutral-10">{{ navViewName }}</h2>
+          <!-- 回 Files 頁 -->
-            <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
+          <router-link to class="mr-4" v-if="navViewName !== 'FILES'">
-              <li @click="switchNavItem($event)" v-for="(item, index) in navViewData[navViewName]" :key="index">{{ item }}</li>
+            <span @click="$router.back(-1)" class="material-symbols-outlined text-neutral-10 leading-loose">
+              arrow_back
+            </span>
+          </router-link>
+          <h2 class="mr-14 py-3 text-2xl font-black text-neutral-10">{{ navViewName }}</h2>
+          <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
+            <li @click="switchNavItem($event)" v-for="(item, index) in navViewData[navViewName]" :key="index">{{ item }}</li>
           </ul>
         </div>
-        <div class="flex justify-end items-center">
+        <!-- Files Page: Search and Upload -->
+        <div class="flex justify-end items-center" v-if="navViewName === 'FILES'">
           <form role="search">
             <label for="searchFiles" class="mr-4 relative">
               <input type="search" id="searchFiles" placeholder="Search" class="px-5 py-2 w-72 rounded-full text-sm align-middle duration-300 border border-neutral-500 hover:border-neutral-300 focus:outline-none focus:ring focus:border-neutral-300">
@@ -26,6 +33,11 @@
             upload
           </label>
         </div>
+        <!-- Other Page: Save and Download -->
+        <div v-else class="space-x-4">
+          <button class="btn btn-sm btn-neutral">Save</button>
+          <button class="btn btn-sm btn-neutral">Download</button>
+        </div>
       </div>
     </div>
   </nav>
@@ -49,9 +61,7 @@ export default {
     };
   },
   watch: {
-    $route(to){
+    '$route':'getnavViewName',
-      this.navViewName = to.name.toUpperCase();
-    }
   },
   setup() {
     const store = filesStore();
@@ -65,11 +75,15 @@ export default {
   },
   mounted() {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
+    this.getnavViewName();
   },
   methods: {
     switchNavItem(event) {
       this.store.filesTag = event.target.innerText;
-    }
+    },
+    getnavViewName() {
+      this.navViewName = this.$route.name.toUpperCase();
+    },
   },
 }
 </script>

src/main.js

@@ -11,12 +11,22 @@ import ToastPlugin from 'vue-toast-notification';
 import cytoscape from 'cytoscape';
 import dagre from 'cytoscape-dagre';
 
+// import CSS
 import "./assets/main.css";
 import 'vue-toast-notification/dist/theme-sugar.css';
 
+// import PrimeVue
+import PrimeVue from 'primevue/config';
+import 'primevue/resources/themes/saga-blue/theme.css'; //theme
+import 'primevue/resources/primevue.min.css'; //core css
+import 'primeicons/primeicons.css'; //icons
+import Sidebar from 'primevue/sidebar';
+import Button from 'primevue/button';
+
 const emitter = mitt();
 const app = createApp(App);
 
+// Pinia Set
 pinia.use(({ store }) => {
   store.$router = markRaw(router);
   store.$axios = markRaw(axios);
@@ -29,6 +39,7 @@ app.config.globalProperties.$moment = moment;
 app.config.globalProperties.emitter = emitter;
 app.config.globalProperties.$cytoscape = cytoscape;
 
+// Cytoscape.js's style
 cytoscape.use( dagre );
 
 app.use(pinia);
@@ -37,5 +48,8 @@ app.use(VueAxios, axios);
 app.use(ToastPlugin, { // use `this.$toast` in Vue.js
   duration: 10000,
 });
+app.use(PrimeVue);
+app.component('Sidebar', Sidebar);
+app.component('Button', Button);
 
 app.mount("#app");

src/views/Discover/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <h1>H1底家啦～~~，這裡是 Discovery 動物頻道耶~</h1>
   <div>
     <!-- 選擇 bpmn / processmap button -->
     <ul class="m-3 flex">
@@ -9,7 +8,6 @@
     </ul>
     <!-- 選擇繪畫樣式 bezier / unbundled-bezier button-->
     <ul class="m-3 flex">
-      <li class="rounded-xl p-2 mr-3 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="switchCurveStyles('bezier')">bezier</li>
       <li class="rounded-xl p-2 mr-3 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="switchCurveStyles('unbundled-bezier')">unbundled-bezier</li>
       <li class="rounded-xl p-2 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="switchCurveStyles('taxi')">taxi</li>
       <li class="p-2">curve style: {{ curveStyle }}</li>

src/views/Login/index.vue

@@ -50,6 +50,7 @@ export default {
     return {
       isDisabled: true,
       showPassword: false,
+      visibleLeft: false,
     }
   },
   setup() {