Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Docs link #542

Merged
merged 1 commit into from
Apr 2, 2024
Merged

feat: add Docs link #542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/components/Header/Header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ header,
z-index: 3;
}

// don't overflow on buttons
nav .button {
white-space: nowrap;
}

// add header background as only being visible when scrolled (over elements)
// or when opened on mobile (also over other elements)
& > .container,
Expand Down
71 changes: 52 additions & 19 deletions src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { Link, LinkProps, useResolvedPath, useMatch } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import { faBars, faExternalLink } from '@fortawesome/free-solid-svg-icons';

import { useWeb3 } from '../../lib/web3/useWeb3';
import { ThemeContext } from '../../lib/theme/themeProvider';
Expand Down Expand Up @@ -97,21 +97,40 @@ export default function Header() {
</div>
<div className="col col-lg">
<div className="row gap-4 ml-5">
{Object.entries(pageLinkMap).map(([link, description]) => (
<div className="col" key={link}>
<NavLink
className="button ghost-button"
to={link}
onClick={closeMenuAndScrollToTop}
>
{description}
</NavLink>
</div>
))}
{Object.entries(pageLinkMap)
// add relative links
.filter(([link]) => link.startsWith('/'))
.map(([link, description]) => (
<div className="col" key={link}>
<NavLink
className="button ghost-button"
to={link}
onClick={closeMenuAndScrollToTop}
>
{description}
</NavLink>
</div>
))}
</div>
</div>
<div className="col ml-auto">
<div className="row gap-4">
{Object.entries(pageLinkMap)
// add external links
.filter(([link]) => !link.startsWith('/'))
.map(([link, description]) => (
<div className="col col-lg" key={link}>
<a
className="button ghost-button"
href={link}
target="_blank"
rel="noreferrer"
>
{description}{' '}
<FontAwesomeIcon className="ml-2" icon={faExternalLink} />
</a>
</div>
))}
<div className="col hide">
<button
className="link no-blend"
Expand Down Expand Up @@ -158,13 +177,27 @@ export default function Header() {
<Drawer className="pt-4" expanded={menuIsOpen}>
{Object.entries(pageLinkMap).map(([link, description]) => (
<div className="col" key={link}>
<NavLink
className="button ghost-button"
to={link}
onClick={closeMenuAndScrollToTop}
>
{description}
</NavLink>
{link.startsWith('/') ? (
// relative links
<NavLink
className="button ghost-button"
to={link}
onClick={closeMenuAndScrollToTop}
>
{description}
</NavLink>
) : (
// external links
<a
className="button ghost-button"
href={link}
target="_blank"
rel="noreferrer"
>
{description}{' '}
<FontAwesomeIcon className="ml-2" icon={faExternalLink} />
</a>
)}
</div>
))}
</Drawer>
Expand Down
1 change: 1 addition & 0 deletions src/components/Header/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const pageLinkMap = {
}),
'/portfolio': 'Portfolio',
'/bridge': 'Bridge',
'https://duality.gitbook.io/duality-documentation/user-interface': 'Docs',
};

export const defaultPage = Object.keys(pageLinkMap).at(0) ?? '/';
Loading