feat(frontend): add header and update sidebar menu

ValoryLabs · Mar 6, 2025 · e82a6c4 · e82a6c4
1 parent 48f9f07
commit e82a6c4
Show file tree

Hide file tree

Showing 18 changed files with 237 additions and 194 deletions.
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
@@ -26,8 +26,8 @@
     --input: 240 5.9% 90%;
     --ring: 240 5.9% 10%;
     --radius: 0.5rem;
-    --sidebar-background: #0f0f0f;
-    --sidebar-foreground: #f2f2f2;
+    --sidebar-background: #000000;
+    --sidebar-foreground: #999999;
     --sidebar-primary: 224.3 76.3% 48%;
     --sidebar-primary-foreground: 0 0% 100%;
     --sidebar-accent: #ffffff1a;

diff --git a/frontend/src/components/DashboardPage/AppSidebar.vue b/frontend/src/components/DashboardPage/AppSidebar.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import NavExtra from '@/components/DashboardPage/NavExtra.vue'
+import NavMain from '@/components/DashboardPage/NavMain.vue'
+import NavStart from '@/components/DashboardPage/NavStart.vue'
+import NavUser from '@/components/DashboardPage/NavUser.vue'
+import { type SidebarProps } from '@/components/ui/sidebar'
+import { Sidebar, SidebarContent, SidebarFooter } from '@/components/ui/sidebar'
+import { NAV_DATA } from '@/data/dashboard/HeaderNav.data'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  collapsible: 'icon',
+})
+
+const data = NAV_DATA
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarContent class="text-lg">
+      <NavStart title="Get started" />
+      <NavMain title="Features" :items="data.navMain" />
+      <NavExtra title="Extra" :items="data.navExtra" :buttons="data.buttons" />
+    </SidebarContent>
+    <SidebarFooter>
+      <NavUser :user="data.user" :buttons="data.buttons" />
+    </SidebarFooter>
+  </Sidebar>
+</template>
diff --git a/frontend/src/components/DashboardPage/Header.vue b/frontend/src/components/DashboardPage/Header.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import HeaderUser from '@/components/DashboardPage/HeaderUser.vue'
+import Valory from '@/components/icons/Valory.vue'
+import { NAV_DATA } from '@/data/dashboard/HeaderNav.data'
+
+const data = NAV_DATA
+</script>
+
+<template>
+  <header
+    class="bg-fd-background/80 lg:h-26 fixed inset-x-0 z-[11] flex h-14 flex-row backdrop-blur-lg transition-colors"
+  >
+    <div class="border-fd-foreground/10 flex flex-1 flex-row justify-between border-b px-4 md:px-6">
+      <span @click="$router.push('/')" class="flex w-fit cursor-pointer items-center gap-3">
+        <Valory />
+        <span class="font-valory">VALORY</span>
+      </span>
+      <HeaderUser :user="data.user" />
+    </div>
+  </header>
+</template>
diff --git a/frontend/src/components/DashboardPage/HeaderUser.vue b/frontend/src/components/DashboardPage/HeaderUser.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ChevronsUpDown, LogOut } from 'lucide-vue-next'
+import { DropdownMenuPortal } from 'radix-vue'
+import { File05, Globe04, Lock01, Settings02 } from 'untitledui-js/vue'
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+const props = defineProps<{
+  user: {
+    name: string
+    avatar: string
+  }
+}>()
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      <div
+        class="flex flex-row items-center gap-2 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+      >
+        <Avatar class="h-8 w-8 rounded-[10px]">
+          <AvatarImage class="bg-black" :src="props.user.avatar" :alt="props.user.name" />
+          <AvatarFallback class="rounded-[10px]"> CN </AvatarFallback>
+        </Avatar>
+        <div class="flex flex-1 flex-col gap-0 text-left text-sm leading-tight">
+          <span class="truncate font-semibold">{{ props.user.name }}</span>
+          <span class="truncate text-xs">Logged as</span>
+        </div>
+        <ChevronsUpDown class="ml-auto size-4" />
+      </div>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      class="bottom w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+      align="end"
+      :side-offset="4"
+    >
+      <DropdownMenuLabel class="p-0 font-normal">
+        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+          <Avatar class="h-8 w-8 rounded-lg">
+            <AvatarImage :src="props.user.avatar" :alt="props.user.name" />
+            <AvatarFallback class="rounded-lg"> CN </AvatarFallback>
+          </Avatar>
+          <div class="grid flex-1 text-left text-sm leading-tight">
+            <span class="truncate font-semibold">{{ props.user.name }}</span>
+          </div>
+        </div>
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <Settings02 />
+          Settings
+        </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Globe04 />
+            Language
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>
+                <span>Russian</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <span>English</span>
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <Lock01 />
+          Privacy Policy
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <File05 />
+          Terms of Service
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        <LogOut />
+        Log out
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/frontend/src/components/ui/NavExtra.vue → ...src/components/DashboardPage/NavExtra.vue b/frontend/src/components/ui/NavExtra.vue → ...src/components/DashboardPage/NavExtra.vue
@@ -20,10 +20,10 @@ defineProps<{
 <template>
   <SidebarGroup class="overflow-x-hidden">
     <SidebarGroupLabel v-if="title">{{ title }}</SidebarGroupLabel>
-    <SidebarMenu v-for="item in items" :key="item.title">
-      <SidebarMenuItem>
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in items" :key="item.title">
         <SidebarMenuButton :tooltip="item.title" as-child>
-          <a href="/">
+          <a :href="item.url">
             <component :is="item.icon" v-if="item.icon" />
             <span>{{ item.title }}</span>
           </a>

diff --git a/frontend/src/components/ui/NavMain.vue → .../src/components/DashboardPage/NavMain.vue b/frontend/src/components/ui/NavMain.vue → .../src/components/DashboardPage/NavMain.vue
@@ -64,7 +64,7 @@ defineProps<{
         </SidebarMenuItem>
         <SidebarMenuItem v-else>
           <SidebarMenuButton :tooltip="item.title" as-child>
-            <a href="/">
+            <a :href="item.url">
               <component :is="item.icon" v-if="item.icon" />
               <span>{{ item.title }}</span>
             </a>

diff --git a/frontend/src/components/DashboardPage/NavStart.vue b/frontend/src/components/DashboardPage/NavStart.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Home02 } from 'untitledui-js/vue'
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar'
+
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <SidebarGroup class="overflow-x-hidden">
+    <SidebarGroupLabel v-if="title">{{ title }}</SidebarGroupLabel>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton as-child>
+          <a href="#">
+            <component :is="Home02" />
+            <span>Introduction</span>
+          </a>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
diff --git a/frontend/src/components/DashboardPage/NavUser.vue b/frontend/src/components/DashboardPage/NavUser.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { SidebarMenu, SidebarMenuButton } from '@/components/ui/sidebar'
+import { openLink } from '@/utils'
+
+const props = defineProps<{
+  buttons?: {
+    icon: any
+    url: string
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarMenu>
+    <div
+      v-if="buttons"
+      class="mx-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>
+  </SidebarMenu>
+</template>
diff --git a/frontend/src/components/ui/AppSidebar.vue b/frontend/src/components/ui/AppSidebar.vue