feat(dashboard-v2): make top navigation bar responsive
This commit is contained in:
Michał Leszczyk
parent
0c275a8f3e
commit
ae5c66817c
|
|
@ -1,21 +1,78 @@
|
|||
import { Link } from "gatsby";
|
||||
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 { NavBarLink, NavBarSection } from ".";
|
||||
|
||||
const NavBarContainer = styled.div.attrs({
|
||||
className: `grid sticky top-0 bg-white`,
|
||||
})``;
|
||||
|
||||
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>
|
||||
<PageContainer>
|
||||
<NavBarBody {...props} />
|
||||
<PageContainer className="px-0">
|
||||
<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>
|
||||
</NavBarContainer>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import styled from "styled-components";
|
|||
|
||||
export const NavBarLink = styled.a.attrs(({ active }) => ({
|
||||
className: `
|
||||
min-w-[168px]
|
||||
sm:min-w-[133px] lg:min-w-[168px]
|
||||
flex h-full items-center justify-center
|
||||
border-x border-x-palette-100 border-b-2
|
||||
text-palette-600 transition-colors hover:bg-palette-100/50
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import PropTypes from "prop-types";
|
|||
import styled from "styled-components";
|
||||
|
||||
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 = {
|
||||
|
|
|
|||
|
|
@ -1,50 +1,23 @@
|
|||
import * as React from "react";
|
||||
import { Link } from "gatsby";
|
||||
|
||||
import styled from "styled-components";
|
||||
import { DropdownMenu, DropdownMenuLink } from "../components/DropdownMenu";
|
||||
|
||||
import { PageContainer } from "../components/PageContainer";
|
||||
import { CogIcon, SkynetLogoIcon, LockClosedIcon } from "../components/Icons";
|
||||
import { NavBar, NavBarLink, NavBarSection } from "../components/Navbar";
|
||||
import { NavBar } from "../components/Navbar";
|
||||
import { Footer } from "../components/Footer";
|
||||
|
||||
const Layout = styled.div.attrs({
|
||||
className: "h-screen overflow-hidden",
|
||||
className: "min-h-screen overflow-hidden",
|
||||
})`
|
||||
background-image: url(/images/dashboard-bg.svg);
|
||||
background-position: -300px -280px;
|
||||
|
||||
.navbar {
|
||||
grid-template-columns: auto max-content 1fr;
|
||||
}
|
||||
background-position: center -280px;
|
||||
background-repeat: no-repeat;
|
||||
`;
|
||||
|
||||
const DashboardLayout = ({ children }) => {
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
<NavBar className="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>
|
||||
<NavBar />
|
||||
<PageContainer>
|
||||
<main className="mt-14">{children}</main>
|
||||
</PageContainer>
|
||||
|
|
|
|||
Reference in New Issue