Skip to content

Commit

Permalink
feat: update mobile nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@abtx
abtx committed Oct 16, 2023
1 parent f916487 commit 9e06286
Show file tree
Hide file tree
Showing 5 changed files with 209 additions and 64 deletions.
118 changes: 75 additions & 43 deletions src/components/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,6 @@ function Navbar({ isDocs }) {

const { navbarRef } = useHideableNavbar(false);

const hamburger = (
<span className="hamburger" onClick={toggleSidebar}>
<img src="/img/icons/hamburger.svg" alt="Menu" width={20} height={17} />
</span>
);

const logo = (
<a className="logo" href="/" aria-label="Infracost logo">
<img
Expand All @@ -72,6 +66,12 @@ function Navbar({ isDocs }) {
</a>
);

const login = (
<a className="infra-navbar__menu-item--login" href="https://dashboard.infracost.io">
Sign up / Log in
</a>
);

const menuItems = [
{
label: 'Products',
Expand Down Expand Up @@ -138,6 +138,7 @@ function Navbar({ isDocs }) {
height="24"
fill="currentColor"
viewBox="0 0 24 24"
className="infra-navbar__group-caret-icon"
>
<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
</svg>
Expand Down Expand Up @@ -171,17 +172,15 @@ function Navbar({ isDocs }) {
)}
</Menu>
))}
<Menu>
<div className="infra-navbar__nav-item">
<a className="infra-navbar__menu-item--login" href="https://dashboard.infracost.io">
Sign up / Log in
</a>
</div>
</Menu>
{!showSidebar ? (
<Menu>
<div className="infra-navbar__nav-item">{login}</div>
</Menu>
) : null}
</div>
);

const community = (
const community = (showSidebar) => (
<>
<a
className="navbar-item github"
Expand All @@ -191,7 +190,7 @@ function Navbar({ isDocs }) {
rel="noreferrer"
>
<img
className="icon filter-invert"
className={`icon ${showSidebar ? '' : 'dark'}`}
src="/img/icons/github.svg"
alt="GitHub icon"
width={24}
Expand Down Expand Up @@ -229,12 +228,6 @@ function Navbar({ isDocs }) {
</>
);

const getStarted = (
<a href="/docs" className="get-started button primary small">
Get started
</a>
);

return (
<nav
ref={navbarRef}
Expand All @@ -243,34 +236,84 @@ function Navbar({ isDocs }) {
<div className="container">
<div className="top level">
<div className="left">
{hamburger}
{logo}
<div className="community">{community}</div>
<div className="community">{community(showSidebar)}</div>
<SearchBar
handleSearchBarToggle={setIsSearchBarExpanded}
isSearchBarExpanded={isSearchBarExpanded}
/>
</div>
<div className="right">{topMenu}</div>
<div className="right">
{topMenu}
<span className="hamburger filter-invert" onClick={toggleSidebar}>
<img src="/img/icons/hamburger.svg" alt="Menu" width={20} height={17} />
</span>
</div>
</div>
<div className="sidebar-backdrop" onClick={toggleSidebar}></div>
<div className="sidebar">
<div className="container">
<div className="header level">
<div className="left">{hamburger}</div>
<div className="right">{getStarted}</div>
<div className="left">
{mobileDocsSidebarState === 'show' ? (
<button
type="button"
className="back"
onClick={() => setMobileDocsSidebarState('hide')}
>
← Back to main menu
</button>
) : (
<Menu>
<div className="infra-navbar__nav-item infra-navbar__menu-item--login-mobile">
{login}
</div>
</Menu>
)}
</div>
<div className="right filter-invert">
<span className="" onClick={toggleSidebar}>
<img src="/img/icons/close.svg" alt="Menu" width={25} height={25} />
</span>
</div>
</div>
{mobileDocsSidebarState === 'show' ? (
<MobileDocsSidebar
content={docsMenu.content}
onHide={() => setMobileDocsSidebarState('hide')}
/>
docsMenu.content
) : (
<div className="sidebar-content">
<div className="navbar-section">{topMenu}</div>
<div className="navbar-section">
{menuItems.map((item, index) => (
<Menu key={`${item.label}-${index}`}>
{item.href ? (
<div className="infra-navbar__nav-item">
<a className="infra-navbar__menu-item" href={item.href}>
{item.label}
</a>
</div>
) : (
<div className="infra-navbar__group">
<Menu.Button className="infra-navbar__group-title infra-navbar__group-title--with-caret">
{item.label}

<div className="infra-navbar__group-caret">{caret}</div>
</Menu.Button>
<Menu.Items className="infra-navbar__items">
{item.groupItems.map((item) => (
<Menu.Item key={item.href} className="infra-navbar__item">
<a className="infra-navbar__item-a" href={item.href}>
{item.label}
</a>
</Menu.Item>
))}
</Menu.Items>
</div>
)}
</Menu>
))}
</div>
<div className="navbar-section">
<h4>Community</h4>
{community}
{community(showSidebar)}
</div>
<div className="navbar-section">
<h4>Outreach</h4>
Expand All @@ -285,15 +328,4 @@ function Navbar({ isDocs }) {
);
}

function MobileDocsSidebar({ content, onHide }) {
return (
<>
<button type="button" className="back navbar-item" onClick={onHide}>
← Back to main menu
</button>
{content}
</>
);
}

export default Navbar;
46 changes: 38 additions & 8 deletions src/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,8 +244,10 @@ code[class^=codeBlockLines_] {
}

.menu__link--sublist:after {
background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem;
color: var(--faded-text);
filter: invert();
padding: 0 1rem;
background-repeat: no-repeat;
background-size: 1.5rem;
}

.menu__link--sublist.menu__link--active {
Expand All @@ -261,22 +263,50 @@ code[class^=codeBlockLines_] {
text-decoration: none;
}

@media (max-width: 996px) {
@media (max-width: 1280px) {
.menu__list-item-collapsible:hover {
background-color: transparent;
}

.menu__list .menu__list-item a {
color: var(--text-color);
padding-bottom: 0.75rem;
padding-top: 0.75rem;
color: var(--infra-nav-show-sidebar-color);
font-weight: var(--infra-nav-show-sidebar-font-weight);
font-size: 15px;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: .875rem 0;
width: 100%;
display: flex;
}

.menu__list .menu__list-item a:hover {
color: var(--link-hover-color);
background-color: var(--docs-header-color);
background-color: transparent;
}

.menu__list-item:not(:first-child) {
margin-top: 0;
}

.menu__link.menu__link--sublist.menu__link--sublist-caret {
position: relative;
text-transform: capitalize;
overflow: hidden;
}

.menu__link.menu__link--sublist.menu__link--sublist-caret:before {
content: "";
width: 1px;
height: calc(100% + 4rem);
background-color: rgba(255,255,255,0.1);
position: absolute;
right: 3rem;
top: -2rem;
z-index: 10;
}

.menu__list .menu__link--active:not(.menu__link--sublist) {
color: var(--primary);
background-color: var(--docs-header-color);
background-color: transparent;
}

.menu__link {
Expand Down
Loading

0 comments on commit 9e06286

Please sign in to comment.