mirror of https://github.com/nocodb/nocodb
DarkPhoenix2704
2 months ago
3 changed files with 8 additions and 134 deletions
@ -1,132 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
const props = defineProps<{ |
||||
activeKey: string |
||||
}>() |
||||
|
||||
const emits = defineEmits(['update:activeKey']) |
||||
|
||||
const activeKey = useVModel(props, 'activeKey', emits) |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const navigationElements = [ |
||||
{ |
||||
key: 'recents', |
||||
icon: iconMap.clock, |
||||
title: 'Recents', |
||||
description: 'Recent activities', |
||||
}, |
||||
{ |
||||
key: 'changelog', |
||||
icon: iconMap.list, |
||||
title: 'Changelog', |
||||
description: 'Recent changes', |
||||
}, |
||||
{ |
||||
key: 'youtube', |
||||
icon: iconMap.youtube, |
||||
title: 'Youtube', |
||||
description: 'Recent changes', |
||||
}, |
||||
{ |
||||
key: 'roadmap', |
||||
icon: iconMap.ncNavigation, |
||||
title: 'Roadmap', |
||||
description: 'Upcoming features', |
||||
}, |
||||
] |
||||
|
||||
const socialLinks = [ |
||||
{ |
||||
key: 'youtube', |
||||
icon: iconMap.youtube, |
||||
title: 'NocoDB', |
||||
url: 'https://www.youtube.com/@nocodb', |
||||
}, |
||||
{ |
||||
key: 'twitter', |
||||
icon: iconMap.twitter, |
||||
title: '@nocodb', |
||||
url: 'https://x.com/nocodb', |
||||
}, |
||||
{ |
||||
key: 'discord', |
||||
icon: iconMap.discord, |
||||
title: 'NocoDB', |
||||
url: 'https://discord.gg/5RgZmkW', |
||||
}, |
||||
{ |
||||
key: 'reddit', |
||||
icon: iconMap.reddit, |
||||
title: 'r/NocoDB', |
||||
url: 'https://www.reddit.com/r/NocoDB', |
||||
}, |
||||
] |
||||
|
||||
const openLink = (url: string, key: string) => { |
||||
$e(`c:nocodb:${key}`) |
||||
window.open(url, '_blank') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div style="height: calc(100% - var(--topbar-height))" class="w-80 p-3 flex flex-col justify-between"> |
||||
<div class="flex flex-col gap-1"> |
||||
<div |
||||
v-for="elem in navigationElements" |
||||
:key="elem.title" |
||||
:class="{ |
||||
'bg-[#F0F3FF]': activeKey === elem.key, |
||||
'hover:bg-gray-100': activeKey !== elem.key, |
||||
}" |
||||
class="flex items-center rounded-lg cursor-pointer transition-all gap-2 p-2" |
||||
@click="activeKey = elem.key" |
||||
> |
||||
<div |
||||
:class="{ |
||||
'!bg-transparent': activeKey === elem.key, |
||||
}" |
||||
class="bg-gray-200 rounded-md h-6 flex items-center justify-center w-6" |
||||
> |
||||
<component |
||||
:is="elem.icon" |
||||
:class="{ |
||||
'text-[#2952CC]': activeKey === elem.key, |
||||
}" |
||||
class="text-gray-700 w-4 h-4" |
||||
/> |
||||
</div> |
||||
<div class="flex gap-1 flex-col"> |
||||
<div |
||||
:class="{ |
||||
'text-[#2952CC]': activeKey === elem.key, |
||||
'text-gray-800': activeKey !== elem.key, |
||||
}" |
||||
class="font-semibold" |
||||
> |
||||
{{ elem.title }} |
||||
</div> |
||||
|
||||
<div class="text-xs text-gray-500"> |
||||
{{ elem.description }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="flex flex-col gap-1"> |
||||
<div |
||||
v-for="social in socialLinks" |
||||
:key="social.key" |
||||
class="flex items-center w-full cursor-pointer transition-all gap-2 px-3 py-2" |
||||
@click="openLink(social.url, social.key)" |
||||
> |
||||
<component :is="social.icon" class="w-5 h-5 stroke-transparent" /> |
||||
<span class="text-[13px] text-gray-800 font-medium"> |
||||
{{ social.title }} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"></style> |
@ -0,0 +1,5 @@
|
||||
<script setup lang="ts"></script> |
||||
|
||||
<template>Recents Feed</template> |
||||
|
||||
<style scoped lang="scss"></style> |
Loading…
Reference in new issue