Added a simple UI cypress test, improvements to ui menu

frontend/src/components/NavMenu.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+import {
+	Book,
+	DeviceDesktop,
+	Home,
+	Lock,
+	Settings,
+	Shield,
+	Users,
+} from "tabler-icons-react";
+import { Navigation } from "tabler-react-typescript";
+
+function NavMenu() {
+	return (
+		<Navigation.Menu
+			theme="light"
+			className="mb-3"
+			items={[
+				{
+					title: "Home",
+					icon: <Home />,
+					to: "/",
+				},
+				{
+					title: "Hosts",
+					icon: <DeviceDesktop />,
+					to: "/hosts",
+				},
+				{
+					title: "Access Lists",
+					icon: <Lock />,
+					to: "/access-lists",
+				},
+				{
+					title: "Certificates",
+					icon: <Shield />,
+					to: "/certificates",
+				},
+				{
+					title: "Users",
+					icon: <Users />,
+					to: "/users",
+				},
+				{
+					title: "Audit Log",
+					icon: <Book />,
+					to: "/audit-log",
+				},
+				{
+					title: "Settings",
+					icon: <Settings />,
+					to: "/settings",
+				},
+			]}
+		/>
+	);
+}
+
+export { NavMenu };

frontend/src/components/SiteWrapper.tsx

@@ -3,17 +3,10 @@ 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";
 
+import { NavMenu } from "./NavMenu";
+
 const StyledContainer = styled.div`
 	padding-bottom: 30px;
 `;
@@ -45,52 +38,14 @@ function SiteWrapper({ children }: Props) {
 					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 key="m1-2">Profile settings</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 />,
-					},
-				]}
-			/>
-
+			<NavMenu />
 			<div className="content">
 				<div className="container-xl">
 					<StyledContainer>{children}</StyledContainer>