adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-07-05 09:21:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update docs

Browse Source
This commit is contained in:
Elio Struyf
2021-09-08 09:06:07 +02:00
parent d04c2a96b7
commit 387c906af2
3 changed files with 72 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/Navigation/Navigation.tsx
+53 -40
View File
@@ -5,6 +5,7 @@ import Link from 'next/link';
import { Extension } from '../../constants/extension';
import { useRouter } from 'next/router';
import { Searchbox } from '../Page/Searchbox';
import { publicUrl } from '../../lib/publicUrl';
export interface INavigationProps {}
@@ -12,49 +13,61 @@ export const Navigation: React.FunctionComponent<INavigationProps> = (props: Rea
const router = useRouter();
return (
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
<div className="w-full py-6 flex items-center justify-center lg:justify-between border-b border-teal-500 lg:border-none">
<div className="flex items-center">
<Link href="/">
<a title={Extension.name}>
<span className="sr-only">{Extension.name}</span>
<Logo className={`text-whisper-500 h-12 w-auto`} />
<>
{
process.env.NEXT_PUBLIC_VERCEL_ENV !== 'production' ? (
<div className={`bg-yellow-500 text-center py-2 px-4`}>
<a href={`https://frontmatter.codes`} title={`Go to main release documentation`} className={`text-base font-medium text-vulcan-500 hover:text-vulcan-900`}>
You are currently viewing the BETA version of Front Matter documentation. Click on the banner to go to the main release documentation.
</a>
</Link>
</div>
<div className="space-x-4">
<div className="hidden ml-10 space-x-8 lg:flex justify-center items-center">
{navigation.main.map((link) => (
<a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900 ${link.href === router.asPath ? `text-teal-800` : ``}`}>
{link.name}
</a>
))}
{navigation.social.map((link) => (
<a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
<span className="sr-only">{link.name}</span>
<link.icon className="inline-block h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
) : null
}
<Searchbox />
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
<div className="w-full py-6 flex items-center justify-center lg:justify-between border-b border-teal-500 lg:border-none">
<div className="flex items-center">
<Link href="/">
<a title={Extension.name}>
<span className="sr-only">{Extension.name}</span>
<Logo className={`text-whisper-500 h-12 w-auto`} />
</a>
</Link>
</div>
<div className="space-x-4">
<div className="hidden ml-10 space-x-8 lg:flex justify-center items-center">
{navigation.main.map((link) => (
<a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900 ${link.href === router.asPath ? `text-teal-800` : ``}`}>
{link.name}
</a>
))}
{navigation.social.map((link) => (
<a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
<span className="sr-only">{link.name}</span>
<link.icon className="inline-block h-6 w-6" aria-hidden="true" />
</a>
))}
<Searchbox />
</div>
</div>
</div>
</div>
<div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
{navigation.main.map((link) => (
<a key={link.name} href={link.href} title={link.title} className="text-base font-medium text-whisper-500 hover:text-whisper-900">
{link.name}
</a>
))}
</div>
<div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
{navigation.social.map((link) => (
<a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
<span className="sr-only">{link.name}</span>
<link.icon className="inline-block h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
</nav>
<div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
{navigation.main.map((link) => (
<a key={link.name} href={link.href} title={link.title} className="text-base font-medium text-whisper-500 hover:text-whisper-900">
{link.name}
</a>
))}
</div>
<div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
{navigation.social.map((link) => (
<a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
<span className="sr-only">{link.name}</span>
<link.icon className="inline-block h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
</nav>
</>
);
};