58 lines
1.9 KiB
JavaScript
58 lines
1.9 KiB
JavaScript
|
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 { Footer } from "../components/Footer";
|
||
|
|
|
||
|
|
const Layout = styled.div.attrs({
|
||
|
|
className: "h-screen overflow-hidden",
|
||
|
|
})`
|
||
|
|
background-image: url(/images/dashboard-bg.svg);
|
||
|
|
background-position: -300px -280px;
|
||
|
|
|
||
|
|
.navbar {
|
||
|
|
grid-template-columns: auto max-content 1fr;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
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>
|
||
|
|
<PageContainer>
|
||
|
|
<main className="mt-14">{children}</main>
|
||
|
|
</PageContainer>
|
||
|
|
<Footer />
|
||
|
|
</Layout>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DashboardLayout;
|