104 lines
2.1 KiB
TypeScript
104 lines
2.1 KiB
TypeScript
import React, { ReactNode } from "react";
|
|
|
|
import { Footer } from "components";
|
|
import { useAuthState, useUserState } from "context";
|
|
import styled from "styled-components";
|
|
import {
|
|
Book,
|
|
DeviceDesktop,
|
|
Home,
|
|
Lock,
|
|
Settings,
|
|
Shield,
|
|
Users,
|
|
} from "tabler-icons-react";
|
|
import { Avatar, Dropdown, Navigation } from "tabler-react-typescript";
|
|
|
|
const StyledContainer = styled.div`
|
|
padding-bottom: 30px;
|
|
`;
|
|
|
|
interface Props {
|
|
children?: ReactNode;
|
|
}
|
|
function SiteWrapper({ children }: Props) {
|
|
const user = useUserState();
|
|
const { logout } = useAuthState();
|
|
|
|
return (
|
|
<div className="wrapper">
|
|
<Navigation.Header
|
|
theme="light"
|
|
brandContent={
|
|
<a href=".">
|
|
<img
|
|
src="/images/logo-bold-horizontal-grey.svg"
|
|
alt="Nginx Proxy Manager"
|
|
className="navbar-brand-image"
|
|
height="32"
|
|
/>
|
|
</a>
|
|
}
|
|
avatar={<Avatar size="sm" url={user.gravatarUrl} />}
|
|
profileName={user.nickname}
|
|
profileSubName={
|
|
user.roles.includes("admin") ? "Administrator" : "Standard User"
|
|
}
|
|
profileItems={[
|
|
<Dropdown.Item key="m1-1">Set status</Dropdown.Item>,
|
|
<Dropdown.Item key="m1-2">Profile & account</Dropdown.Item>,
|
|
<Dropdown.Item key="m1-3">Feedback</Dropdown.Item>,
|
|
<Dropdown.Item divider key="m1-4" />,
|
|
<Dropdown.Item key="m1-5">Settings</Dropdown.Item>,
|
|
<Dropdown.Item key="m1-6" onClick={logout}>
|
|
Logout
|
|
</Dropdown.Item>,
|
|
]}
|
|
/>
|
|
<Navigation.Menu
|
|
theme="light"
|
|
className="mb-3"
|
|
items={[
|
|
{
|
|
title: "Home",
|
|
icon: <Home />,
|
|
active: true,
|
|
},
|
|
{
|
|
title: "Hosts",
|
|
icon: <DeviceDesktop />,
|
|
},
|
|
{
|
|
title: "Access Lists",
|
|
icon: <Lock />,
|
|
},
|
|
{
|
|
title: "Certificates",
|
|
icon: <Shield />,
|
|
},
|
|
{
|
|
title: "Users",
|
|
icon: <Users />,
|
|
},
|
|
{
|
|
title: "Audit Log",
|
|
icon: <Book />,
|
|
},
|
|
{
|
|
title: "Settings",
|
|
icon: <Settings />,
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<div className="content">
|
|
<div className="container-xl">
|
|
<StyledContainer>{children}</StyledContainer>
|
|
</div>
|
|
</div>
|
|
<Footer fixed />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { SiteWrapper };
|