docs(footer): framework logo on the rule and active links

docs/app/components/Footer.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 const route = useRoute()
 const { links } = useFooter()
+const { framework } = useFrameworks()
+
+const icon = computed(() => {
+  if (framework.value === 'nuxt') return 'i-simple-icons-nuxtdotjs'
+  if (framework.value === 'vue') return 'i-simple-icons-vuedotjs'
+  return undefined
+})
 </script>
 
 <template>
-  <USeparator :icon="route.path === '/' ? undefined : 'i-simple-icons-nuxtdotjs'" class="h-px" />
+  <USeparator :icon="route.path === '/' ? undefined : icon" class="h-px" />
 
   <UFooter>
     <template #left>

docs/app/composables/useFooter.ts

@@ -1,20 +1,23 @@
 export function useFooter() {
-  // The secondary destinations the header no longer carries (resources,
-  // releases, figma) live here, next to the ones it never did.
-  const links = [{
+  const route = useRoute()
+
+  const links = computed(() => [{
     label: 'Blog',
-    to: '/blog'
+    to: '/blog',
+    active: route.path.startsWith('/blog')
   }, {
     label: 'Community',
-    to: '/community'
+    to: '/community',
+    active: route.path.startsWith('/community')
   }, {
     label: 'Playground',
     to: '/play',
     target: '_blank'
   }, {
     label: 'Team',
-    to: '/team'
-  }]
+    to: '/team',
+    active: route.path.startsWith('/team')
+  }])
 
   return {
     links