Hover Button

Author: vchan14

src/App.vue

@@ -1,19 +1,23 @@
 <script setup>
 import { RouterView } from 'vue-router'
 import RouterButton from "@/components/RouterButton.vue";
+import { introExamples} from "@/examplelists.js";
 
 </script>
 
 <template>
   <div class="flex flex-row gap-x-2 h-full w-full">
-    <div class="flex flex-col w-36 p-2">
-      <div class="flex flex-col">
-        <h2>Introduction</h2>
-        <RouterButton to-path="/helloworld" name="Hello World"/>
-        <RouterButton to-path="/dynamicattributes" name="Dynamic Attributes"/>
-        <RouterButton to-path="/styling" name="Styling"/>
-        <RouterButton to-path="/nestedcomponents" name="Nested Component"/>
-        <RouterButton to-path="/htmldirective" name="HTML Directive"/>
+    <div class="flex flex-col w-56 p-2">
+      <p class="text-2xl">Vue 3 Examples</p>
+      <br>
+      <div class="flex flex-col gap-y-2">
+        <p class="text-xl">Introduction</p>
+        <RouterButton
+            v-for="example in introExamples"
+            :key="example.name"
+            :to-path="example.path"
+            :name="example.name"
+        />
       </div>
 
     </div>

src/components/ReplWrapper.vue

@@ -25,7 +25,6 @@ store.setFiles({
 })
 
 
-
 </script>
 
 <template>

src/components/RouterButton.vue

@@ -1,4 +1,7 @@
 <script setup>
+import { defineProps, computed } from 'vue';
+import { useRoute } from 'vue-router';
+
 const props = defineProps({
   toPath: {
     type: String,
@@ -8,20 +11,29 @@ const props = defineProps({
     type: String,
     default: '/'
   }
-})
+});
 
+const route = useRoute();
+const isSelected = computed(() => route.path === props.toPath);
 </script>
 
 <template>
   <button
-      class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-2 border border-gray-400 rounded shadow"
+      :class="{'selected': isSelected, 'bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-2 border border-gray-400 rounded shadow': true}"
       @click="$router.push(props.toPath)"
   >
     {{ props.name }}
   </button>
-
 </template>
 
 <style scoped>
+.selected {
+  background-color: #0056b3;
+  color: white;
+}
+
+button.selected:hover {
+  background-color: #0056b3;
+}
 
 </style>

src/examplelists.js

@@ -0,0 +1,23 @@
+
+export const introExamples = [
+    {
+        name: "Hello World",
+        path: "/helloworld"
+    },
+    {
+        name: "Dynamic Attributes",
+        path: '/dynamicattributes',
+    },
+    {
+        name: "Styling",
+        path: '/styling'
+    },
+    {
+        name: "Nested Component",
+        path: '/nestedcomponents'
+    },
+    {
+        name: "HTML Directive",
+        path: '/htmldirective'
+    }
+]

src/views/htmldirective/default.js

@@ -1,10 +1,10 @@
 export const AppVue = `
 <!-- Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content. -->
-<script setup>
-  const htmlString = \`hello <b>world</b>\`;
-</script>
-
 <template>
   <p v-html="htmlString"></p>
 </template>
+
+<script setup>
+  const htmlString = \`hello <b>world</b>\`;
+</script>
 `.trimStart()