feat(dashboard): fix collapse animation in sidebar, remove social buttons to sidebar footer, add tooltips for social buttons, add faceit in overlays

Author: haxgun

frontend/src/App.vue

@@ -40,5 +40,3 @@ useSeoMeta({
 <template>
   <RouterView />
 </template>
-
-<style scoped></style>

frontend/src/components/icons/Socials/Faceit.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface Props {
+  size?: number
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: '#F2F2F2',
+})
+</script>
+<template>
+  <svg
+    :width="props.size"
+    :height="props.size"
+    viewBox="0 0 33 31"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M32.5 0.890631C32.5 0.605881 32.1982 0.535756 32.0792 0.748256C28.2224 7.79688 25.9932 11.7834 24.068 15.483H0.930992C0.631367 15.483 0.510242 15.9101 0.750367 16.0525C10.3299 20.3238 24.1849 26.8029 31.956 30.3601C32.1366 30.4324 32.4979 30.2178 32.4979 30.0754V0.890631H32.5Z"
+      :fill="props.color"
+    />
+  </svg>
+</template>

frontend/src/components/ui/AppSidebar.vue

@@ -34,12 +34,12 @@ const data = NAV_DATA
       </span>
       <SidebarTrigger />
     </SidebarHeader>
-    <SidebarContent class="relative text-lg">
-      <NavMain :items="data.navMain" />
-      <NavExtra class="absolute bottom-0" :items="data.navExtra" :buttons="data.buttons" />
+    <SidebarContent class="text-lg">
+      <NavMain title="Main" :items="data.navMain" />
+      <NavExtra title="Extra" :items="data.navExtra" :buttons="data.buttons" />
     </SidebarContent>
     <SidebarFooter>
-      <NavUser :user="data.user" />
+      <NavUser :user="data.user" :buttons="data.buttons" />
     </SidebarFooter>
     <SidebarRail />
   </Sidebar>

frontend/src/components/ui/NavExtra.vue

@@ -1,20 +1,14 @@
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
 import {
   SidebarGroup,
   SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
 } from '@/components/ui/sidebar'
-import { openLink } from '@/utils'
 
 defineProps<{
   title?: string
-  buttons?: {
-    icon: any
-    url: string
-  }[]
   items: {
     title: string
     url: string
@@ -25,7 +19,7 @@ defineProps<{
 
 <template>
   <SidebarGroup class="overflow-x-hidden">
-    <SidebarGroupLabel v-if="title" class="uppercase">{{ title }}</SidebarGroupLabel>
+    <SidebarGroupLabel v-if="title">{{ title }}</SidebarGroupLabel>
     <SidebarMenu v-for="item in items" :key="item.title">
       <SidebarMenuItem>
         <SidebarMenuButton :tooltip="item.title" as-child>
@@ -36,19 +30,5 @@ defineProps<{
         </SidebarMenuButton>
       </SidebarMenuItem>
     </SidebarMenu>
-    <div
-      v-if="buttons"
-      class="m-2 mb-0 flex max-w-[16rem] flex-row justify-between gap-3 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:items-center"
-    >
-      <Button
-        class="h-8 w-8 bg-white/5"
-        variant="ghost"
-        v-for="button in buttons"
-        :key="button.url"
-        @click="openLink(button.url)"
-      >
-        <component :size="16" :is="button.icon" v-if="button.icon" />
-      </Button>
-    </div>
   </SidebarGroup>
 </template>

frontend/src/components/ui/NavMain.vue

@@ -30,7 +30,7 @@ defineProps<{
 
 <template>
   <SidebarGroup>
-    <SidebarGroupLabel v-if="title" class="uppercase">{{ title }}</SidebarGroupLabel>
+    <SidebarGroupLabel v-if="title">{{ title }}</SidebarGroupLabel>
     <SidebarMenu>
       <Collapsible
         v-for="item in items"

frontend/src/components/ui/NavUser.vue

@@ -18,19 +18,38 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from '@/components/ui/sidebar'
+import { openLink } from '@/utils'
 
 const props = defineProps<{
   user: {
     name: string
     avatar: string
   }
+  buttons?: {
+    icon: any
+    url: string
+  }[]
 }>()
 
 const { isMobile } = useSidebar()
 </script>
 
 <template>
   <SidebarMenu>
+    <div
+      v-if="buttons"
+      class="m-2 mb-0 flex max-w-[16rem] flex-row justify-between gap-3 group-data-[collapsible=icon]:m-0 group-data-[collapsible=icon]:mb-3 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:items-start"
+    >
+      <SidebarMenuButton
+        class="h-8 w-8 bg-white/5"
+        v-for="button in buttons"
+        :key="button.url"
+        @click="openLink(button.url)"
+        :tooltip="button.title"
+      >
+        <component :size="16" :is="button.icon" v-if="button.icon" />
+      </SidebarMenuButton>
+    </div>
     <SidebarMenuItem>
       <DropdownMenu>
         <DropdownMenuTrigger as-child>

frontend/src/components/ui/sidebar/Sidebar.vue

@@ -84,7 +84,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     >
       <div
         data-sidebar="sidebar"
-        class="flex h-full w-full flex-col bg-sidebar text-sidebar-foreground group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+        class="flex h-full w-full flex-col gap-2 bg-sidebar text-sidebar-foreground group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
       >
         <slot />
       </div>

frontend/src/components/ui/sidebar/SidebarGroupLabel.vue

@@ -11,15 +11,14 @@ const props = defineProps<
   }
 >()
 </script>
-
 <template>
   <Primitive
     data-sidebar="group-label"
     :as="as"
     :as-child="asChild"
     :class="
       cn(
-        'text-sidebar-foreground/70 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground/70 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium uppercase text-white/60 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
         props.class,
       )

frontend/src/data/dashboard/HeaderNav.data.ts

@@ -1,6 +1,7 @@
 import { BookClosed, Hearts, HelpCircle, HomeLine, LayersThree01, Link03 } from 'untitledui-js/vue'
 
 import Discord from '@/components/icons/Socials/Discord.vue'
+import Faceit from '@/components/icons/Socials/Faceit.vue'
 import Github from '@/components/icons/Socials/Github.vue'
 import Spotify from '@/components/icons/Socials/Spotify.vue'
 import Telegram from '@/components/icons/Socials/Telegram.vue'
@@ -33,6 +34,7 @@ interface User {
 }
 
 interface Button {
+  title: string
   icon: any
   url: string
 }
@@ -60,13 +62,18 @@ export const NAV_DATA: NavData = {
       title: 'Overlays',
       url: '#',
       icon: LayersThree01,
-      isActive: true,
+      isActive: false,
       items: [
         {
           title: 'Valorant',
           url: '#',
           icon: Valorant,
         },
+        {
+          title: 'Faceit',
+          url: '#',
+          icon: Faceit,
+        },
         {
           title: 'Spotify',
           url: '#',
@@ -99,22 +106,27 @@ export const NAV_DATA: NavData = {
   ],
   buttons: [
     {
+      title: 'Github',
       icon: Github,
       url: 'https://github.com/ValoryApp/Valory',
     },
     {
+      title: 'Twitch',
       icon: Twitch,
       url: 'https://twitch.tv/MAGICXcmd',
     },
     {
+      title: 'Discord',
       icon: Discord,
       url: 'https://discord.gg/valory',
     },
     {
+      title: 'Telegram',
       icon: Telegram,
       url: 'https://t.me/magicxcmd',
     },
     {
+      title: 'Donate',
       icon: Hearts,
       url: 'https://www.donationalerts.com/r/haxgun',
     },