Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Update navbar content and styling so it has style similar to Snowflake

Browse Source
This commit is contained in:
Arista Indrajaya 2024-03-05 16:02:33 +07:00
parent 5758ac8b94
commit 50412a6eed
1 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
docs/src/theme/NavbarExtension/index.js
View File

@ -1,13 +1,48 @@
import React from "react";
import css from "./index.module.css";
import NavPageContainer from "./NavPageContainer";
import { NavLink, useLocation } from "react-router-dom";
export default function NavBarExtension() {
const location = useLocation();
export default function NavBar() {
return (
<div className={css.NavBar}>
<NavPageContainer />
</div>
<nav className="bg-white dark:bg-gray-800 h-12 px-10 pt-3 flex items-center justify-between fixed top-14 left-0 w-full z-10 hidden md:block">
<div className="flex items-center space-x-16">
<NavLink
to="/docs"
className="text-gray-700 font-medium hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-200"
activeClassName="text-gray-900 dark:text-gray-100 font-bold border-b-2 border-gray-900 dark:border-gray-100"
>
Docs
</NavLink>
<NavLink
to="/guides"
className="text-gray-700 font-medium hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-200"
activeClassName={location.pathname !== "/guides/changelog" && location.pathname === "/guides" ? "text-gray-900 dark:text-gray-100 font-semibold border-b-2 border-gray-900 dark:border-gray-100" : ""}
>
Guide
</NavLink>
<NavLink
to="/developer"
className="text-gray-700 font-medium hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-200"
activeClassName="text-gray-900 dark:text-gray-100 font-semibold border-b-2 border-gray-900 dark:border-gray-100"
>
Developer
</NavLink>
<NavLink
to="/api-reference"
className="text-gray-700 font-medium hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-200"
activeClassName="text-gray-900 dark:text-gray-100 font-semibold border-b-2 border-gray-900 dark:border-gray-100"
>
API Reference
</NavLink>
<NavLink
to="/guides/changelog"
className="text-gray-700 font-medium hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-200"
activeClassName={location.pathname === "/guides/changelog" ? "text-gray-900 dark:text-gray-100 font-semibold border-b-2 border-gray-900 dark:border-gray-100" : ""}
>
Changelogs
</NavLink>
</div>
</nav>
);
}
}