Use tabler-react-typescript, updated frontend deps

frontend/src/components/Router.tsx

@@ -4,9 +4,15 @@ import { Loading, SiteWrapper, SinglePage } from "components";
 import { useAuthState, useHealthState, UserProvider } from "context";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
 
-const Setup = lazy(() => import("pages/Setup"));
+const AccessLists = lazy(() => import("pages/AccessLists"));
+const AuditLog = lazy(() => import("pages/AuditLog"));
+const Certificates = lazy(() => import("pages/Certificates"));
 const Dashboard = lazy(() => import("pages/Dashboard"));
+const Hosts = lazy(() => import("pages/Hosts"));
 const Login = lazy(() => import("pages/Login"));
+const Settings = lazy(() => import("pages/Settings"));
+const Setup = lazy(() => import("pages/Setup"));
+const Users = lazy(() => import("pages/Users"));
 
 function Router() {
 	const { health } = useHealthState();
@@ -43,6 +49,24 @@ function Router() {
 				<SiteWrapper>
 					<Suspense fallback={Spinner}>
 						<Switch>
+							<Route path="/hosts">
+								<Hosts />
+							</Route>
+							<Route path="/certificates">
+								<Certificates />
+							</Route>
+							<Route path="/audit-log">
+								<AuditLog />
+							</Route>
+							<Route path="/access-lists">
+								<AccessLists />
+							</Route>
+							<Route path="/users">
+								<Users />
+							</Route>
+							<Route path="/settings">
+								<Settings />
+							</Route>
 							<Route path="/">
 								<Dashboard />
 							</Route>

frontend/src/components/SiteWrapper.tsx

@@ -3,9 +3,18 @@ import React, { ReactNode } from "react";
 import { Footer } from "components";
 import { useAuthState, useUserState } from "context";
 import styled from "styled-components";
-import { Site, Container, Button, Grid, List } from "tabler-react";
+import {
+	Book,
+	DeviceDesktop,
+	Home,
+	Lock,
+	Settings,
+	Shield,
+	Users,
+} from "tabler-icons-react";
+import { Avatar, Dropdown, Navigation } from "tabler-react-typescript";
 
-const StyledContainer = styled(Container)`
+const StyledContainer = styled.div`
 	padding-bottom: 30px;
 `;
 
@@ -16,177 +25,79 @@ function SiteWrapper({ children }: Props) {
 	const user = useUserState();
 	const { logout } = useAuthState();
 
-	const accountDropdownProps = {
-		avatarURL: user.gravatarUrl,
-		name: user.nickname,
-		description: user.roles.includes("admin")
-			? "Administrator"
-			: "Standard User",
-		options: [
-			{ icon: "user", value: "Profile" },
-			{ icon: "settings", value: "Settings" },
-			{ isDivider: true },
-			{
-				icon: "help-circle",
-				value: "Need help?",
-				href: "https://nginxproxymanager.com",
-				target: "_blank",
-			},
-			{ icon: "log-out", value: "Log out", onClick: logout },
-		],
-	};
-
-	const navBarItems = [
-		{
-			value: "Home",
-			to: "/",
-			icon: "home",
-			//LinkComponent: withRouter(NavLink),
-			useExact: true,
-		},
-		{
-			value: "Interface",
-			icon: "box",
-			subItems: [
-				{
-					value: "Cards Design",
-					to: "/cards",
-					//LinkComponent: withRouter(NavLink),
-				},
-				//{ value: "Charts", to: "/charts", LinkComponent: withRouter(NavLink) },
-				{
-					value: "Pricing Cards",
-					to: "/pricing-cards",
-					//LinkComponent: withRouter(NavLink),
-				},
-			],
-		},
-		{
-			value: "Components",
-			icon: "calendar",
-			/*
-			subItems: [
-				{ value: "Maps", to: "/maps", LinkComponent: withRouter(NavLink) },
-				{ value: "Icons", to: "/icons", LinkComponent: withRouter(NavLink) },
-				{ value: "Store", to: "/store", LinkComponent: withRouter(NavLink) },
-				{ value: "Blog", to: "/blog", LinkComponent: withRouter(NavLink) },
-			],
-			*/
-		},
-		{
-			value: "Pages",
-			icon: "file",
-			subItems: [
-				{
-					value: "Profile",
-					to: "/profile",
-					//LinkComponent: withRouter(NavLink),
-				},
-				//{ value: "Login", to: "/login", LinkComponent: withRouter(NavLink) },
-				{
-					value: "Register",
-					to: "/register",
-					//LinkComponent: withRouter(NavLink),
-				},
-				{
-					value: "Forgot password",
-					to: "/forgot-password",
-					//LinkComponent: withRouter(NavLink),
-				},
-				{
-					value: "Empty page",
-					to: "/empty-page",
-					//LinkComponent: withRouter(NavLink),
-				},
-				//{ value: "RTL", to: "/rtl", LinkComponent: withRouter(NavLink) },
-			],
-		},
-		{
-			value: "Forms",
-			to: "/form-elements",
-			icon: "check-square",
-			//LinkComponent: withRouter(NavLink),
-		},
-		{
-			value: "Gallery",
-			to: "/gallery",
-			icon: "image",
-			//LinkComponent: withRouter(NavLink),
-		},
-		{
-			icon: "file-text",
-			value: "Documentation",
-			to:
-				process.env.NODE_ENV === "production"
-					? "https://tabler.github.io/tabler-react/documentation"
-					: "/documentation",
-		},
-	];
-
 	return (
-		<Site.Wrapper
-			headerProps={{
-				href: "/",
-				alt: "Nginx Proxy Manager",
-				imageURL: "/images/logo-bold-horizontal-grey.svg",
-				accountDropdown: accountDropdownProps,
-			}}
-			navProps={{ itemsObjects: navBarItems }}
-			//routerContextComponentType={withRouter(RouterContextProvider)}
-			footerProps={{
-				links: [
-					<a href="#asd">First Link</a>,
-					<a href="#fg">Second Link</a>,
-					<a href="#dsg">Third Link</a>,
-					<a href="#egf">Fourth Link</a>,
-					<a href="#dsf">Five Link</a>,
-					<a href="#sdfg">Sixth Link</a>,
-					<a href="#sdf">Seventh Link</a>,
-					<a href="#sdf">Eigth Link</a>,
-				],
-				note: "Premium and Open Source dashboard template with responsive and high quality UI. For Free!",
-				copyright: (
-					<React.Fragment>
-						Copyright © 2019
-						<a href="."> Tabler-react</a>. Theme by
-						<a
-							href="https://codecalm.net"
-							target="_blank"
-							rel="noopener noreferrer">
-							{" "}
-							codecalm.net
-						</a>{" "}
-						All rights reserved.
-					</React.Fragment>
-				),
-				nav: (
-					<React.Fragment>
-						<Grid.Col auto={true}>
-							<List className="list-inline list-inline-dots mb-0">
-								<List.Item className="list-inline-item">
-									<a href="./docs/index.html">Documentation</a>
-								</List.Item>
-								<List.Item className="list-inline-item">
-									<a href="./faq.html">FAQ</a>
-								</List.Item>
-							</List>
-						</Grid.Col>
-						<Grid.Col auto={true}>
-							<Button
-								href="https://github.com/tabler/tabler-react"
-								size="sm"
-								outline
-								color="primary"
-								RootComponent="a">
-								Source code
-							</Button>
-						</Grid.Col>
-					</React.Fragment>
-				),
-			}}>
-			<StyledContainer>{children}</StyledContainer>
+		<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 &amp; 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 />
-		</Site.Wrapper>
+		</div>
 	);
 }