fix: left menu lessons active

menthorlabs · Aug 13, 2023 · 7c972d8 · 7c972d8
1 parent 532b201
commit 7c972d8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/apps/app/components/atoms/LeftMenuLessonItem.vue b/apps/app/components/atoms/LeftMenuLessonItem.vue
@@ -18,12 +18,9 @@ function finishTask() {
 </script>
 
 <template>
-  <nuxt-link
-    :to="navigation._path"
-    class="group flex h-[32px] items-center gap-2 rounded-tr border-l border-zinc-300 px-3 py-1 text-sm font-normal text-zinc-500 hover:bg-zinc-50 hover:text-zinc-950"
+  <div
+    class="flex h-[32px] items-center gap-2 rounded-tr border-l border-zinc-300 px-3 py-1 text-sm font-normal text-zinc-500 hover:bg-zinc-50 hover:text-zinc-950 group-[.is-active]:bg-zinc-100 group-[.is-active]:text-zinc-950 group-[.is-active]:border-zinc-900"
     :class="{ '!border-l-2 !border-green-600 !text-zinc-950': done }"
-    exact-active-class="bg-zinc-100 text-zinc-950 border-zinc-900"
-    :title="navigation.title"
   >
     <div class="flex-1 min-w-0 truncate">{{ navigation.title }}</div>
     <button
@@ -38,5 +35,5 @@ function finishTask() {
         icon="check"
       />
     </button>
-  </nuxt-link>
+  </div>
 </template>
diff --git a/apps/app/components/molecules/LeftMenuLessons.vue b/apps/app/components/molecules/LeftMenuLessons.vue
@@ -8,10 +8,15 @@ const { navigation } = defineProps<{
 <template>
   <div class="mb-6">
     <h5 class="mb-2 text-xs font-semibold">{{ navigation.title }}</h5>
-    <LeftMenuLessonItem
+    <nuxt-link
       v-for="item in navigation.children"
       :key="item._id"
-      :navigation="item"
-    />
+      :title="item.title"
+      :to="item._path"
+      class="group"
+      exact-active-class="is-active"
+    >
+      <LeftMenuLessonItem :navigation="item" />
+    </nuxt-link>
   </div>
 </template>