Skip to content

Commit e82a6c4

Browse files
haxgunhaxgun
committed
feat(frontend): add header and update sidebar menu
1 parent 48f9f07 commit e82a6c4

File tree

18 files changed

+237
-194
lines changed

18 files changed

+237
-194
lines changed

‎frontend/src/assets/main.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
--input: 240 5.9% 90%;
2727
--ring: 240 5.9% 10%;
2828
--radius: 0.5rem;
29-
--sidebar-background: #0f0f0f;
30-
--sidebar-foreground: #f2f2f2;
29+
--sidebar-background: #000000;
30+
--sidebar-foreground: #999999;
3131
--sidebar-primary: 224.3 76.3% 48%;
3232
--sidebar-primary-foreground: 0 0% 100%;
3333
--sidebar-accent: #ffffff1a;

‎frontend/src/components/DashboardPage/AppSidebar.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup lang="ts">
2+
import NavExtra from '@/components/DashboardPage/NavExtra.vue'
3+
import NavMain from '@/components/DashboardPage/NavMain.vue'
4+
import NavStart from '@/components/DashboardPage/NavStart.vue'
5+
import NavUser from '@/components/DashboardPage/NavUser.vue'
6+
import { type SidebarProps } from '@/components/ui/sidebar'
7+
import { Sidebar, SidebarContent, SidebarFooter } from '@/components/ui/sidebar'
8+
import { NAV_DATA } from '@/data/dashboard/HeaderNav.data'
9+
10+
const props = withDefaults(defineProps<SidebarProps>(), {
11+
collapsible: 'icon',
12+
})
13+
14+
const data = NAV_DATA
15+
</script>
16+
17+
<template>
18+
<Sidebar v-bind="props">
19+
<SidebarContent class="text-lg">
20+
<NavStart title="Get started" />
21+
<NavMain title="Features" :items="data.navMain" />
22+
<NavExtra title="Extra" :items="data.navExtra" :buttons="data.buttons" />
23+
</SidebarContent>
24+
<SidebarFooter>
25+
<NavUser :user="data.user" :buttons="data.buttons" />
26+
</SidebarFooter>
27+
</Sidebar>
28+
</template>

‎frontend/src/components/DashboardPage/Header.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import HeaderUser from '@/components/DashboardPage/HeaderUser.vue'
3+
import Valory from '@/components/icons/Valory.vue'
4+
import { NAV_DATA } from '@/data/dashboard/HeaderNav.data'
5+
6+
const data = NAV_DATA
7+
</script>
8+
9+
<template>
10+
<header
11+
class="bg-fd-background/80 lg:h-26 fixed inset-x-0 z-[11] flex h-14 flex-row backdrop-blur-lg transition-colors"
12+
>
13+
<div class="border-fd-foreground/10 flex flex-1 flex-row justify-between border-b px-4 md:px-6">
14+
<span @click="$router.push('/')" class="flex w-fit cursor-pointer items-center gap-3">
15+
<Valory />
16+
<span class="font-valory">VALORY</span>
17+
</span>
18+
<HeaderUser :user="data.user" />
19+
</div>
20+
</header>
21+
</template>

‎frontend/src/components/DashboardPage/HeaderUser.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<script setup lang="ts">
2+
import { ChevronsUpDown, LogOut } from 'lucide-vue-next'
3+
import { DropdownMenuPortal } from 'radix-vue'
4+
import { File05, Globe04, Lock01, Settings02 } from 'untitledui-js/vue'
5+
6+
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
7+
import {
8+
DropdownMenu,
9+
DropdownMenuContent,
10+
DropdownMenuGroup,
11+
DropdownMenuItem,
12+
DropdownMenuLabel,
13+
DropdownMenuSeparator,
14+
DropdownMenuSub,
15+
DropdownMenuSubContent,
16+
DropdownMenuSubTrigger,
17+
DropdownMenuTrigger,
18+
} from '@/components/ui/dropdown-menu'
19+
20+
const props = defineProps<{
21+
user: {
22+
name: string
23+
avatar: string
24+
}
25+
}>()
26+
</script>
27+
28+
<template>
29+
<DropdownMenu>
30+
<DropdownMenuTrigger>
31+
<div
32+
class="flex flex-row items-center gap-2 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
33+
>
34+
<Avatar class="h-8 w-8 rounded-[10px]">
35+
<AvatarImage class="bg-black" :src="props.user.avatar" :alt="props.user.name" />
36+
<AvatarFallback class="rounded-[10px]"> CN </AvatarFallback>
37+
</Avatar>
38+
<div class="flex flex-1 flex-col gap-0 text-left text-sm leading-tight">
39+
<span class="truncate font-semibold">{{ props.user.name }}</span>
40+
<span class="truncate text-xs">Logged as</span>
41+
</div>
42+
<ChevronsUpDown class="ml-auto size-4" />
43+
</div>
44+
</DropdownMenuTrigger>
45+
<DropdownMenuContent
46+
class="bottom w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
47+
align="end"
48+
:side-offset="4"
49+
>
50+
<DropdownMenuLabel class="p-0 font-normal">
51+
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
52+
<Avatar class="h-8 w-8 rounded-lg">
53+
<AvatarImage :src="props.user.avatar" :alt="props.user.name" />
54+
<AvatarFallback class="rounded-lg"> CN </AvatarFallback>
55+
</Avatar>
56+
<div class="grid flex-1 text-left text-sm leading-tight">
57+
<span class="truncate font-semibold">{{ props.user.name }}</span>
58+
</div>
59+
</div>
60+
</DropdownMenuLabel>
61+
<DropdownMenuSeparator />
62+
<DropdownMenuGroup>
63+
<DropdownMenuItem>
64+
<Settings02 />
65+
Settings
66+
</DropdownMenuItem>
67+
<DropdownMenuSub>
68+
<DropdownMenuSubTrigger>
69+
<Globe04 />
70+
Language
71+
</DropdownMenuSubTrigger>
72+
<DropdownMenuPortal>
73+
<DropdownMenuSubContent>
74+
<DropdownMenuItem>
75+
<span>Russian</span>
76+
</DropdownMenuItem>
77+
<DropdownMenuItem>
78+
<span>English</span>
79+
</DropdownMenuItem>
80+
</DropdownMenuSubContent>
81+
</DropdownMenuPortal>
82+
</DropdownMenuSub>
83+
</DropdownMenuGroup>
84+
<DropdownMenuSeparator />
85+
<DropdownMenuGroup>
86+
<DropdownMenuItem>
87+
<Lock01 />
88+
Privacy Policy
89+
</DropdownMenuItem>
90+
<DropdownMenuItem>
91+
<File05 />
92+
Terms of Service
93+
</DropdownMenuItem>
94+
</DropdownMenuGroup>
95+
<DropdownMenuSeparator />
96+
<DropdownMenuItem>
97+
<LogOut />
98+
Log out
99+
</DropdownMenuItem>
100+
</DropdownMenuContent>
101+
</DropdownMenu>
102+
</template>

‎frontend/src/components/ui/NavExtra.vue‎ renamed to ‎frontend/src/components/DashboardPage/NavExtra.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ defineProps<{
2020
<template>
2121
<SidebarGroup class="overflow-x-hidden">
2222
<SidebarGroupLabel v-if="title">{{ title }}</SidebarGroupLabel>
23-
<SidebarMenu v-for="item in items" :key="item.title">
24-
<SidebarMenuItem>
23+
<SidebarMenu>
24+
<SidebarMenuItem v-for="item in items" :key="item.title">
2525
<SidebarMenuButton :tooltip="item.title" as-child>
26-
<a href="/">
26+
<a :href="item.url">
2727
<component :is="item.icon" v-if="item.icon" />
2828
<span>{{ item.title }}</span>
2929
</a>

‎frontend/src/components/ui/NavMain.vue‎ renamed to ‎frontend/src/components/DashboardPage/NavMain.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ defineProps<{
6464
</SidebarMenuItem>
6565
<SidebarMenuItem v-else>
6666
<SidebarMenuButton :tooltip="item.title" as-child>
67-
<a href="/">
67+
<a :href="item.url">
6868
<component :is="item.icon" v-if="item.icon" />
6969
<span>{{ item.title }}</span>
7070
</a>

‎frontend/src/components/DashboardPage/NavStart.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
import { Home02 } from 'untitledui-js/vue'
3+
4+
import {
5+
SidebarGroup,
6+
SidebarGroupLabel,
7+
SidebarMenu,
8+
SidebarMenuButton,
9+
SidebarMenuItem,
10+
} from '@/components/ui/sidebar'
11+
12+
defineProps<{
13+
title?: string
14+
}>()
15+
</script>
16+
17+
<template>
18+
<SidebarGroup class="overflow-x-hidden">
19+
<SidebarGroupLabel v-if="title">{{ title }}</SidebarGroupLabel>
20+
<SidebarMenu>
21+
<SidebarMenuItem>
22+
<SidebarMenuButton as-child>
23+
<a href="#">
24+
<component :is="Home02" />
25+
<span>Introduction</span>
26+
</a>
27+
</SidebarMenuButton>
28+
</SidebarMenuItem>
29+
</SidebarMenu>
30+
</SidebarGroup>
31+
</template>

‎frontend/src/components/DashboardPage/NavUser.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
import { SidebarMenu, SidebarMenuButton } from '@/components/ui/sidebar'
3+
import { openLink } from '@/utils'
4+
5+
const props = defineProps<{
6+
buttons?: {
7+
icon: any
8+
url: string
9+
}[]
10+
}>()
11+
</script>
12+
13+
<template>
14+
<SidebarMenu>
15+
<div
16+
v-if="buttons"
17+
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"
18+
>
19+
<SidebarMenuButton
20+
class="h-8 w-8 bg-white/5"
21+
v-for="button in buttons"
22+
:key="button.url"
23+
@click="openLink(button.url)"
24+
:tooltip="button.title"
25+
>
26+
<component :size="16" :is="button.icon" v-if="button.icon" />
27+
</SidebarMenuButton>
28+
</div>
29+
</SidebarMenu>
30+
</template>

‎frontend/src/components/ui/AppSidebar.vue‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)