Skip to content

Commit

Permalink
Fix dev hub navigation bar responsiveness issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@martineckardt
martineckardt committed Nov 19, 2024
1 parent 4f21c0e commit c943189
Show file tree
Hide file tree
Showing 8 changed files with 8,310 additions and 429 deletions.
252 changes: 1 addition & 251 deletions app/(home)/page.client.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
'use client';
import { TerminalIcon } from 'lucide-react';
import React, {
useEffect,
useState,
Fragment,
type ReactElement,
} from 'react';
import { IndentDecrease, Layers, MailIcon, MonitorCheck, Settings, SproutIcon, SquareGanttChart, TerminalIcon, Webhook, HomeIcon, FolderCode, BadgeDollarSign, CpuIcon, Files, Folder, Globe, Link, SquareIcon, ArrowLeftRight, Coins, SquareCode, SquareStackIcon, Triangle, ChevronDownIcon, Pyramid, HandCoins, Server, Code, TrendingUp, ScanFace, Telescope, LayoutTemplate, Building2, BookOpen, Podcast, Wallet } from 'lucide-react';
import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';


export function DeployBlockchainAnimation(): React.ReactElement {
Expand Down Expand Up @@ -96,253 +95,4 @@ export function DeployBlockchainAnimation(): React.ReactElement {
</pre>
</div>
);
}


export function HamburgerMenu(): React.ReactElement {

return (
<RootToggle
options={[
{
title: 'Docs',
description: '',
icon: <></>,
url: '',
},
{
title: 'Avalanche Protocol',
description: 'Learn about Avalanche',
icon: <SproutIcon />,
url: '/learn',
},
{
title: 'Smart Contracts',
description: 'Build Apps on Avalanche',
icon: <SquareGanttChart />,
url: '/dapps',
},
{
title: 'Avalanche L1s',
description: 'Build Your L1 Blockchain',
icon: <Layers />,
url: '/avalanche-l1s',
},
{
title: 'EVM Customization',
description: 'Customize the Ethereum VM',
icon: <Pyramid />,
url: '/evm-l1s',
},
{
title: 'Custom Virtual Machines',
description: 'Customize Your Execution Layer',
icon: <IndentDecrease />,
url: '/virtual-machines',
},
{
title: 'Nodes & Validators',
description: 'Participate in the Network',
icon: <MonitorCheck />,
url: '/nodes',
},
{
title: 'Interoperability',
description: 'AWM and Teleporter',
icon: <MailIcon />,
url: '/cross-chain',
},
{
title: 'Tooling',
description: 'CLI, Scripts, and More',
icon: <Settings />,
url: '/tooling',
},
{
title: 'API Docs',
description: 'Avalanche API References',
icon: <Webhook />,
url: '/api-reference',
}
]}
/>
)
}

interface Option {
title: string
description: string
icon: React.ReactNode
url: string
}

interface AcademyDropdownProps {
width?: string
}

export function AcademyDropdown({ width = 'w-72' }: AcademyDropdownProps) {
const options: Option[] = [
{
title: 'Courses',
description: '',
icon: <></>,
url: '',
},
{
title: 'Blockchain Fundamentals',
description: 'Understand fundamental blockchain concepts.',
icon: <SquareIcon className="w-5 h-5" />,
url: 'https://academy.avax.network/course/blockchain-fundamentals',
},
{
title: 'Avalanche Fundamentals',
description: 'Overview of Avalanche Consensus, L1s, and VMs.',
icon: <Triangle className="w-5 h-5" />,
url: 'https://academy.avax.network/course/avalanche-fundamentals',
},
{
title: "Multi-Chain Architecture",
description: 'Deploy your own blockchain with multi-chain architecture.',
icon: <SquareStackIcon className="w-5 h-5" />,
url: 'https://academy.avax.network/course/multi-chain-architecture',
},
{
title: "Interchain Messaging",
description: 'Build cross-chain dApps on Avalanche.',
icon: <MailIcon className="w-5 h-5" />,
url: 'https://academy.avax.network/course/interchain-messaging',
},
{
title: "Interchain Token Transfer",
description: 'Transfer assets between Avalanche blockchains.',
icon: <ArrowLeftRight className="w-5 h-5" />,
url: 'https://academy.avax.network/course/interchain-token-transfer',
},
{
title: "Customizing the EVM",
description: 'Add custom precompiles to the EVM.',
icon: <SquareCode className="w-5 h-5" />,
url: 'https://academy.avax.network/course/customizing-evm',
},
{
title: "Layer 1 Tokenomics",
description: 'Design tokenomics for your Avalanche L1.',
icon: <Coins className="w-5 h-5" />,
url: 'https://academy.avax.network/course/l1-tokenomics',
},
{
title: "AvaCloud APIs",
description: 'Use AvaCloud APIs to build web apps.',
icon: <Webhook className="w-5 h-5" />,
url: 'https://academy.avax.network/course/avacloudapis',
},
{
title: "HyperSDK",
description: 'Build high-performance blockchains with HyperSDK.',
icon: <TerminalIcon className="w-5 h-5" />,
url: 'https://academy.avax.network/course/hypersdk',
}
];
return (
<RootToggle options={options} />
)
}



export function GrantsDropdown() {
const options: Option[] = [
{
title: 'Grants & Programs',
description: '',
icon: <></>,
url: '',
},
{
title: 'Retro9000',
description: 'Build publicly and get rewarded.',
icon: <HandCoins className="w-5 h-5" />,
url: 'https://www.avax.network/retro9000',
},
{
title: 'infraBUIDL()',
description: 'Infrastructure projects that enhance user and developer experience',
icon: <Server className="w-5 h-5" />,
url: 'https://www.avax.network/infrabuidl-program',
},
{
title: 'Codebase',
description: 'Transforming ambitious builders into extraordinary founders',
icon: <Code className="w-5 h-5" />,
url: 'https://codebase.avax.network/',
},
{
title: 'Blizzard Fund',
description: 'VC fund investing in innovative entrepreneurs driving growth on Avalanche',
icon: <TrendingUp className="w-5 h-5" />,
url: 'https://www.blizzard.fund/',
},

];
return (
<RootToggle options={options} />
)
}


export function IntegrationsDropdown() {
const options: Option[] = [
{
title: 'Integrations',
description: '',
icon: <></>,
url: '/integrations',
},
{
title: 'Account Abstraction',
description: "",
icon: <ScanFace className="w-5 h-5" />,
url: '/integrations#Account%20Abstraction',
},
{
title: 'Block Explorers',
description: "",
icon: <Telescope className="w-5 h-5" />,
url: '/integrations#Block%20Explorers',
},
{
title: 'Blockchain as a Service',
description: "",
icon: <LayoutTemplate className="w-5 h-5" />,
url: '/integrations#Blockchain%20as%20a%20Service',
},
{
title: 'Enterprise Solutions',
description: "",
icon: <Building2 className="w-5 h-5" />,
url: '/integrations#Enterprise%20Solutions',
},
{
title: 'Indexers',
description: "",
icon: <BookOpen className="w-5 h-5" />,
url: '/integrations#Indexers',
},
{
title: 'Oracles',
description: "",
icon: <Podcast className="w-5 h-5" />,
url: '/integrations#Oracles',
},
{
title: 'Wallets',
description: "",
icon: <Wallet className="w-5 h-5" />,
url: '/integrations#Wallet%20SDKs',
},

];
return (
<RootToggle options={options} />
)
}
4 changes: 4 additions & 0 deletions app/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,8 @@ h2.text-sm.font-medium {
.hover\:bg-accent:hover {
--tw-bg-opacity: 1;
background-color: hsl(212.99deg 45.23% 89.66%);
}

nav a:not(:first-child) {
display: none;
}
89 changes: 10 additions & 79 deletions app/layout.client.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,17 @@
'use client';
import type { ReactNode } from 'react';
import { AcademyDropdown, HamburgerMenu, GrantsDropdown, IntegrationsDropdown } from './(home)/page.client';
import { AvalancheLogo } from '@/components/navigation/avalanche-logo';

const svgCode = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" viewBox="0 0 220 190" enable-background="new 0 0 220 190" xml:space="preserve">
<path fill="#010000" opacity="0" stroke="none"
d="
M106.000000,191.000000
C70.687920,191.000000 35.875835,191.000000 1.031875,191.000000
C1.031875,127.726570 1.031875,64.453117 1.031875,1.089830
C74.228607,1.089830 147.457367,1.089830 220.843063,1.089830
C220.843063,64.333038 220.843063,127.666473 220.843063,191.000000
C182.786728,191.000000 144.643356,191.000000 106.000000,191.000000
M108.753487,23.066143
C106.781303,24.703455 104.299789,26.001934 102.939713,28.046438
C99.810646,32.750118 97.235901,37.821735 94.420807,42.735210
C71.899803,82.043488 49.344860,121.332367 26.880989,160.673264
C23.042721,167.395203 25.895014,172.155457 33.583733,172.183975
C48.081749,172.237732 62.580860,172.111847 77.077980,172.237946
C83.770172,172.296158 88.432472,169.499405 91.727638,163.708237
C107.212326,136.494400 122.784348,109.330147 138.378067,82.178566
C141.392197,76.930382 141.523560,71.750351 138.545532,66.532860
C131.114777,53.514198 123.769547,40.442513 116.039948,27.602837
C114.786873,25.521351 111.741776,24.518684 108.753487,23.066143
M189.977249,151.515366
C182.832336,139.327515 175.755188,127.099236 168.514145,114.968781
C164.857819,108.843597 159.019684,108.509308 155.552734,114.306282
C146.170135,129.994598 136.920776,145.764069 127.775551,161.592056
C124.725456,166.870987 127.530586,172.066513 133.547867,172.121841
C152.337845,172.294647 171.131317,172.293900 189.921402,172.129471
C196.006195,172.076218 198.644424,167.142075 195.809311,161.653442
C194.133530,158.409164 192.156281,155.320618 189.977249,151.515366
z"/>
<path fill="#FD3648" opacity="1.000000" stroke="none"
d="
M109.139252,23.041748
C111.741776,24.518684 114.786873,25.521351 116.039948,27.602837
C123.769547,40.442513 131.114777,53.514198 138.545532,66.532860
C141.523560,71.750351 141.392197,76.930382 138.378067,82.178566
C122.784348,109.330147 107.212326,136.494400 91.727638,163.708237
C88.432472,169.499405 83.770172,172.296158 77.077980,172.237946
C62.580860,172.111847 48.081749,172.237732 33.583733,172.183975
C25.895014,172.155457 23.042721,167.395203 26.880989,160.673264
C49.344860,121.332367 71.899803,82.043488 94.420807,42.735210
C97.235901,37.821735 99.810646,32.750118 102.939713,28.046438
C104.299789,26.001934 106.781303,24.703455 109.139252,23.041748
z"/>
<path fill="#FC3648" opacity="1.000000" stroke="none"
d="
M190.145935,151.838699
C192.156281,155.320618 194.133530,158.409164 195.809311,161.653442
C198.644424,167.142075 196.006195,172.076218 189.921402,172.129471
C171.131317,172.293900 152.337845,172.294647 133.547867,172.121841
C127.530586,172.066513 124.725456,166.870987 127.775551,161.592056
C136.920776,145.764069 146.170135,129.994598 155.552734,114.306282
C159.019684,108.509308 164.857819,108.843597 168.514145,114.968781
C175.755188,127.099236 182.832336,139.327515 190.145935,151.838699
z"/>
</svg>`
export function HomeTitle(): React.ReactElement {
return (
<>
<img width="80" height="80" src={`data:image/svg+xml;utf8,${encodeURIComponent(svgCode)}`} className="size-7" alt="logo" />
<span style={{fontSize: "large"}}>Developer Hub</span>
<div className="flex items-center pl-4 space-x-3">
<HamburgerMenu />
<AcademyDropdown />
<GrantsDropdown />
<IntegrationsDropdown />
</div>
</>
);
}

export function Title(): React.ReactElement {
return (
<>
<img width="80" height="80" src={`data:image/svg+xml;utf8,${encodeURIComponent(svgCode)}`} className="size-7" alt="logo" />
<span style={{fontSize: "large"}}>Developer Hub</span>
</>
);
}

export function NavbarTitle(): React.ReactElement {
return (
<>
<AvalancheLogo />
<span style={{ fontSize: "large" }}>Developer Hub</span>
</>
);
}

export function Body({
children,
Expand Down
Loading

0 comments on commit c943189

Please sign in to comment.