feat(dashboard-v2): make top navigation bar responsive

This commit is contained in:
Michał Leszczyk 2022-02-23 11:19:09 +01:00
parent 0c275a8f3e
commit ae5c66817c
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
4 changed files with 70 additions and 40 deletions

View File

@ -1,21 +1,78 @@
import { Link } from "gatsby";
import styled from "styled-components"; import styled from "styled-components";
import { screen } from "../../lib/cssHelpers";
import { DropdownMenu, DropdownMenuLink } from "../DropdownMenu";
import { CogIcon, LockClosedIcon, SkynetLogoIcon } from "../Icons";
import { PageContainer } from "../PageContainer"; import { PageContainer } from "../PageContainer";
import { NavBarLink, NavBarSection } from ".";
const NavBarContainer = styled.div.attrs({ const NavBarContainer = styled.div.attrs({
className: `grid sticky top-0 bg-white`, className: `grid sticky top-0 bg-white`,
})``; })``;
const NavBarBody = styled.nav.attrs({ const NavBarBody = styled.nav.attrs({
className: "grid h-[80px] font-sans font-light text-sm", className: "grid font-sans font-light text-xs sm:text-sm",
})` })`
grid-template-columns: auto max-content 1fr; height: 100px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 60px 40px;
grid-template-areas:
"logo dropdown"
"navigation navigation";
${screen(
"sm",
`
height: 80px;
grid-template-columns: auto max-content 1fr;
grid-template-areas: "logo navigation dropdown";
grid-template-rows: auto;
`
)}
.navigation-area {
grid-area: navigation;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.logo-area {
grid-area: logo;
justify-content: start;
}
.dropdown-area {
grid-area: dropdown;
}
`; `;
export const NavBar = (props) => ( export const NavBar = () => (
<NavBarContainer> <NavBarContainer>
<PageContainer> <PageContainer className="px-0">
<NavBarBody {...props} /> <NavBarBody>
<NavBarSection className="logo-area pl-2 pr-4 md:px-0 md:w-[110px] justify-center sm:justify-start">
<SkynetLogoIcon size={48} />
</NavBarSection>
<NavBarSection className="navigation-area border-t border-palette-100">
<NavBarLink to="/" as={Link} activeClassName="!border-b-primary">
Dashboard
</NavBarLink>
<NavBarLink to="/files" as={Link} activeClassName="!border-b-primary">
Files
</NavBarLink>
<NavBarLink to="/payments" as={Link} activeClassName="!border-b-primary">
Payments
</NavBarLink>
</NavBarSection>
<NavBarSection className="dropdown-area justify-end">
<DropdownMenu title="My account">
<DropdownMenuLink href="/settings" icon={CogIcon} label="Settings" />
<DropdownMenuLink href="/logout" icon={LockClosedIcon} label="Log out" />
</DropdownMenu>
</NavBarSection>
</NavBarBody>
</PageContainer> </PageContainer>
</NavBarContainer> </NavBarContainer>
); );

View File

@ -3,7 +3,7 @@ import styled from "styled-components";
export const NavBarLink = styled.a.attrs(({ active }) => ({ export const NavBarLink = styled.a.attrs(({ active }) => ({
className: ` className: `
min-w-[168px] sm:min-w-[133px] lg:min-w-[168px]
flex h-full items-center justify-center flex h-full items-center justify-center
border-x border-x-palette-100 border-b-2 border-x border-x-palette-100 border-b-2
text-palette-600 transition-colors hover:bg-palette-100/50 text-palette-600 transition-colors hover:bg-palette-100/50

View File

@ -2,7 +2,7 @@ import PropTypes from "prop-types";
import styled from "styled-components"; import styled from "styled-components";
export const PageContainer = styled.div.attrs({ export const PageContainer = styled.div.attrs({
className: `mx-auto w-page md:w-page-md lg:w-page-lg xl:w-page-xl`, className: `mx-auto w-page lg:w-page-lg xl:w-page-xl px-2 md:px-16 lg:px-0`,
})``; })``;
PageContainer.propTypes = { PageContainer.propTypes = {

View File

@ -1,50 +1,23 @@
import * as React from "react"; import * as React from "react";
import { Link } from "gatsby";
import styled from "styled-components"; import styled from "styled-components";
import { DropdownMenu, DropdownMenuLink } from "../components/DropdownMenu";
import { PageContainer } from "../components/PageContainer"; import { PageContainer } from "../components/PageContainer";
import { CogIcon, SkynetLogoIcon, LockClosedIcon } from "../components/Icons"; import { NavBar } from "../components/Navbar";
import { NavBar, NavBarLink, NavBarSection } from "../components/Navbar";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
const Layout = styled.div.attrs({ const Layout = styled.div.attrs({
className: "h-screen overflow-hidden", className: "min-h-screen overflow-hidden",
})` })`
background-image: url(/images/dashboard-bg.svg); background-image: url(/images/dashboard-bg.svg);
background-position: -300px -280px; background-position: center -280px;
background-repeat: no-repeat;
.navbar {
grid-template-columns: auto max-content 1fr;
}
`; `;
const DashboardLayout = ({ children }) => { const DashboardLayout = ({ children }) => {
return ( return (
<> <>
<Layout> <Layout>
<NavBar className="navbar"> <NavBar />
<NavBarSection className="w-[110px] justify-start">
<SkynetLogoIcon size={48} />
</NavBarSection>
<NavBarSection>
<NavBarLink to="/" as={Link} activeClassName="!border-b-primary">
Dashboard
</NavBarLink>
<NavBarLink to="/files" as={Link} activeClassName="!border-b-primary">
Files
</NavBarLink>
<NavBarLink to="/payments" as={Link} activeClassName="!border-b-primary">
Payments
</NavBarLink>
</NavBarSection>
<NavBarSection className="justify-end">
<DropdownMenu title="My account">
<DropdownMenuLink href="/settings" icon={CogIcon} label="Settings" />
<DropdownMenuLink href="/logout" icon={LockClosedIcon} label="Log out" />
</DropdownMenu>
</NavBarSection>
</NavBar>
<PageContainer> <PageContainer>
<main className="mt-14">{children}</main> <main className="mt-14">{children}</main>
</PageContainer> </PageContainer>