refactor(nav): update NavLink icon and handle active link logic

dallay · Oct 8, 2024 · af00ca6 · af00ca6
1 parent ec2f2bb
commit af00ca6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/apps/frontend/apps/lyra-app/components/nav/NavLink.vue b/apps/frontend/apps/lyra-app/components/nav/NavLink.vue
@@ -21,7 +21,7 @@ const props = withDefaults(
  isCollapsed?: boolean;
  }>(),
  {
- icon: 'lucide:file',
+ icon: 'ph:dot-thin',
  title: '',
  to: '',
  label: '',
@@ -39,7 +39,9 @@ const { hasPermission } = usePermissionCheck(props.to);
 
 const isActiveLink = computed(() => {
  if (!props.to) return false;
- return route.path === props.to || route.path.startsWith(props.to);
+ if (route.path === props.to) return true;
+ if (props.to === '/') return route.path === '/';
+ return route.path.startsWith(props.to);
 });
 
 const computedClasses = computed(() => {

diff --git a/apps/frontend/apps/lyra-app/components/nav/links-list.ts b/apps/frontend/apps/lyra-app/components/nav/links-list.ts
@@ -10,14 +10,14 @@ const navigationLinks: LinkProp[] = [
  title: 'Dashboard',
  to: '/',
  icon: 'lucide:layout-dashboard',
- variant: 'default',
+ variant: 'ghost',
  },
  {
  id: generateId('Start Writing'),
  title: 'Start Writing',
- to: '/',
+ to: '/posts',
  icon: 'lucide:layout-dashboard',
- variant: 'default',
+ variant: 'ghost',
  },
  {
  id: generateId('Posts'),