+
+ );
+};
+
+export default DashboardLayout;
diff --git a/frontend/src/components/molecules/Sidebar.tsx b/frontend/src/components/molecules/Sidebar.tsx
new file mode 100644
index 0000000..e4ac10c
--- /dev/null
+++ b/frontend/src/components/molecules/Sidebar.tsx
@@ -0,0 +1,130 @@
+import {
+ CubeIcon,
+ GlobeAltIcon,
+ LockClosedIcon,
+ LogoutIcon,
+ PuzzleIcon,
+} from "@heroicons/react/outline";
+import { FC, ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+import Badge from "../atoms/Badge";
+import InputLabel from "../atoms/InputLabel";
+
+const SidebarTab: FC<{
+ onClick?: any;
+ children?: ReactNode;
+ badge?: ReactNode;
+}> = (props) => {
+ return (
+
+ );
+};
+
+const Sidebar = () => {
+ const navigate = useNavigate();
+
+ const navFactory = (to: string) => () => {
+ navigate(to);
+ };
+
+ return (
+
+
+ {props.children}
+
+
+
+
+ );
+};
+
+export default Sidebar;
diff --git a/frontend/src/components/molecules/TextField.tsx b/frontend/src/components/molecules/TextField.tsx
new file mode 100644
index 0000000..6f82efc
--- /dev/null
+++ b/frontend/src/components/molecules/TextField.tsx
@@ -0,0 +1,21 @@
+import { FC, HTMLProps } from "react";
+import Input from "../atoms/Input";
+import InputLabel from "../atoms/InputLabel";
+
+const TextField: FC
+
+
+
+
+
+
+
+
+
+
+
+ Traefik
++ Confman +
+
+
+
+
+ Config
+
+
+
+
+
+
+
+
+
+
+
+ nikuu
+
+
+
+ {props.label}
+
+ );
+};
+
+export default TextField;
diff --git a/frontend/src/components/pages/middleware/index.tsx b/frontend/src/components/pages/middleware/index.tsx
new file mode 100644
index 0000000..135326e
--- /dev/null
+++ b/frontend/src/components/pages/middleware/index.tsx
@@ -0,0 +1,11 @@
+import DashboardLayout from "../../layouts/Dashboard";
+
+const MiddlewarePage = () => {
+ return (
+
+
+
+ Middleware
+ Routers
+ Secrets
+ Services
+
+
+
+ 
+
+
+
+ + Setup Traefik Confman +
+
+
+
+
+
+