Skip to content

Commit 561d64a

Browse files
edmoiseenkovedmoiseenkov
committed
feat: redesign the header component
1 parent 7649464 commit 561d64a

File tree

5 files changed

+105
-41
lines changed

5 files changed

+105
-41
lines changed

‎block-explorer/components/navigation.tsx

Lines changed: 61 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,19 @@
22

33
import { Fragment, useState } from 'react';
44

5-
import { Card, CardContent, CardHeader } from '@/components/ui/card';
5+
import { Card, CardContent } from '@/components/ui/card';
6+
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible.tsx';
67
import {
78
DropdownMenu,
89
DropdownMenuContent,
910
DropdownMenuItem,
1011
DropdownMenuTrigger,
1112
} from '@/components/ui/dropdown-menu.tsx';
1213
import { cn } from '@/lib/utils';
13-
import { RiArrowDownSLine } from '@remixicon/react';
14-
import { MenuIcon, XIcon } from 'lucide-react';
14+
import { RiArrowDownSLine, RiCloseLargeLine, RiMenuLine } from '@remixicon/react';
1515
import Link from 'next/link';
1616
import { usePathname } from 'next/navigation';
1717

18-
const items = [
19-
{ title: 'Blocks', href: '/blocks' },
20-
{ title: 'Extrinsics', href: '/extrinsics' },
21-
{ title: 'Events', href: '/events' },
22-
{ title: 'EVM Transactions', href: '/evm-transactions' },
23-
{ title: 'Addresses', href: '/addresses' },
24-
{ title: 'Bridge', href: '/bridge' },
25-
{ title: 'Tokens', href: '/tokens' },
26-
{ title: 'DEX', href: '/dex' },
27-
{ title: 'Staking', href: '/staking' },
28-
{ title: 'Verified Contracts', href: '/verified-contracts' },
29-
{ title: 'Ecosystem', href: '/ecosystem' },
30-
{ title: 'API', href: 'https://build.rootscan.io', newTab: true },
31-
];
32-
3318
type HeaderMenuLink = {
3419
title: string;
3520
href: string;
@@ -41,7 +26,7 @@ type HeaderMenuGroupLink = {
4126
subitems: Omit<HeaderMenuLink, 'target'>[];
4227
};
4328

44-
const items2: Array<HeaderMenuLink | HeaderMenuGroupLink> = [
29+
const items: Array<HeaderMenuLink | HeaderMenuGroupLink> = [
4530
{
4631
title: 'Blockchain',
4732
subitems: [
@@ -73,7 +58,7 @@ export function Navigation() {
7358
return (
7459
<Fragment>
7560
<div className="hidden items-center gap-0.5 px-4 lg:flex">
76-
{items2.map((item, _) => {
61+
{items.map((item, _) => {
7762
const { title } = item;
7863
const { href, target } = item as HeaderMenuLink;
7964
const { subitems } = item as HeaderMenuGroupLink;
@@ -103,12 +88,13 @@ export function Navigation() {
10388
<DropdownMenuTrigger asChild>{headerMenuLink}</DropdownMenuTrigger>
10489
<DropdownMenuContent className="flex flex-col gap-1 rounded-[12px] bg-popover p-2">
10590
{subitems?.map((subitem, i) => (
106-
<DropdownMenuItem
107-
asChild
108-
key={i}
109-
className="cursor-pointer rounded-[4px] px-3 py-2 text-[14px]/[20px] font-semibold"
110-
>
111-
<Link href={subitem.href}>{subitem.title}</Link>
91+
<DropdownMenuItem key={i} asChild>
92+
<Link
93+
href={subitem.href}
94+
className="cursor-pointer rounded-[4px] px-3 py-2 text-[14px]/[20px] font-semibold"
95+
>
96+
{subitem.title}
97+
</Link>
11298
</DropdownMenuItem>
11399
))}
114100
</DropdownMenuContent>
@@ -129,22 +115,58 @@ export const MobileMenu = () => {
129115
return (
130116
<Fragment>
131117
<div className="block lg:hidden">
132-
<div className="duration-300 animate-in animate-out fade-in fade-out" onClick={() => setOpen(!open)}>
133-
{open ? <XIcon /> : <MenuIcon />}
118+
<div className="p-1 duration-300 animate-in animate-out fade-in fade-out" onClick={() => setOpen(!open)}>
119+
{open ? <RiCloseLargeLine className="size-6" /> : <RiMenuLine className="size-6" />}
134120
</div>
135121
</div>
136122
<div className={cn([open ? 'absolute left-0 top-[64px] !m-0 w-full' : 'hidden'])}>
137-
<Card className="rounded-b-2xl rounded-t-none">
138-
<CardHeader className="pb-0" />
139-
<CardContent>
140-
<div className="flex flex-col gap-4">
141-
{items.map((item, _) => (
142-
<Link href={item.href} onClick={() => setOpen(false)} key={_} target={item.newTab ? '_blank' : '_self'}>
143-
<div className="flex items-center text-sm font-bold text-muted-foreground duration-150 ease-in hover:text-primary">
144-
{item.title}
145-
</div>
146-
</Link>
147-
))}
123+
<Card className="rounded-b-2xl rounded-t-none dark:bg-black">
124+
<CardContent className="p-2">
125+
<div className="flex flex-col gap-0.5">
126+
{items.map((item, _) => {
127+
const { title } = item;
128+
const { href } = item as HeaderMenuLink;
129+
const { subitems } = item as HeaderMenuGroupLink;
130+
const isLink = !!href;
131+
132+
const headerMenuLink = (
133+
<Link
134+
className="group flex items-center justify-between py-3.5 pl-2 pr-3.5 text-[14px]/[20px] font-semibold transition-all"
135+
href={isLink ? href : '#'}
136+
onClick={() => isLink && setOpen(false)}
137+
>
138+
{title}
139+
{!isLink && (
140+
<RiArrowDownSLine className="size-5 transition-all group-data-[state=open]:rotate-180" />
141+
)}
142+
</Link>
143+
);
144+
145+
return (
146+
<Fragment key={_}>
147+
{isLink ? (
148+
headerMenuLink
149+
) : (
150+
<Collapsible>
151+
<CollapsibleTrigger asChild>{headerMenuLink}</CollapsibleTrigger>
152+
<CollapsibleContent>
153+
<div className="flex flex-col gap-1 rounded-[12px] border p-2">
154+
{subitems?.map((subitem, i) => (
155+
<Link
156+
key={i}
157+
href={subitem.href}
158+
className="cursor-pointer rounded-[4px] px-3 py-2 text-[14px]/[20px] font-semibold"
159+
>
160+
{subitem.title}
161+
</Link>
162+
))}
163+
</div>
164+
</CollapsibleContent>
165+
</Collapsible>
166+
)}
167+
</Fragment>
168+
);
169+
})}
148170
</div>
149171
</CardContent>
150172
</Card>

‎block-explorer/components/site-header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import { Badge } from './ui/badge';
1111
export function SiteHeader() {
1212
return (
1313
<Fragment>
14-
<header className="z-40 flex w-full flex-col bg-white py-4 dark:bg-black/50">
14+
<header className="z-40 flex w-full flex-col bg-white py-4 dark:bg-black">
1515
<SiteTopBar />
16-
<div className="container flex items-center justify-between gap-4 space-x-4 pt-0 sm:space-x-0 lg:pt-4">
16+
<div className="container flex items-center justify-between gap-4 space-x-4 px-4 pt-0 sm:space-x-0 lg:px-8 lg:pt-4">
1717
<Link href="/" className="flex items-center gap-2">
1818
<Image
1919
src="/site-logos/rootscan-logo.png"

‎block-explorer/components/ui/collapsible.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
2+
3+
const Collapsible = CollapsiblePrimitive.Root;
4+
5+
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
6+
7+
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
8+
9+
export { Collapsible, CollapsibleTrigger, CollapsibleContent };

‎block-explorer/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@icons-pack/react-simple-icons": "^9.7.0",
2323
"@radix-ui/react-accordion": "^1.2.3",
2424
"@radix-ui/react-avatar": "^1.1.3",
25+
"@radix-ui/react-collapsible": "^1.1.11",
2526
"@radix-ui/react-dropdown-menu": "^2.1.6",
2627
"@radix-ui/react-hover-card": "^1.1.6",
2728
"@radix-ui/react-navigation-menu": "^1.2.5",

‎block-explorer/pnpm-lock.yaml

Lines changed: 32 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)