Initial commit

src/layout/AppShell.tsx

@@ -0,0 +1,120 @@
+import { Outlet, NavLink } from "react-router-dom";
+import {
+  Button,
+  makeStyles,
+  shorthands,
+  Text,
+  Title2,
+  tokens,
+} from "@fluentui/react-components";
+import {
+  AppsListDetail24Regular,
+  BoxMultiple24Regular,
+  CloudFlow24Regular,
+  DatabasePlugConnectedRegular,
+  Globe24Regular,
+  Home24Regular,
+  PlayCircle24Regular,
+  ServerMultipleRegular,
+} from "@fluentui/react-icons";
+
+const useStyles = makeStyles({
+  root: {
+    minHeight: "100vh",
+    display: "grid",
+    gridTemplateColumns: "280px minmax(0, 1fr)",
+    backgroundColor: tokens.colorNeutralBackground2,
+    color: tokens.colorNeutralForeground1,
+  },
+  sidebar: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "20px",
+    backgroundColor: tokens.colorNeutralBackground1,
+    ...shorthands.borderRight("1px", "solid", tokens.colorNeutralStroke2),
+    ...shorthands.padding("24px", "18px"),
+  },
+  brand: {
+    display: "grid",
+    gap: "4px",
+    ...shorthands.padding("0", "6px"),
+  },
+  nav: {
+    display: "grid",
+    gap: "6px",
+  },
+  navLink: {
+    textDecorationLine: "none",
+  },
+  navButton: {
+    width: "100%",
+    justifyContent: "flex-start",
+  },
+  content: {
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+  },
+  topbar: {
+    height: "64px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: tokens.colorNeutralBackground1,
+    ...shorthands.borderBottom("1px", "solid", tokens.colorNeutralStroke2),
+    ...shorthands.padding("0", "28px"),
+  },
+  main: {
+    ...shorthands.padding("28px"),
+  },
+});
+
+const links = [
+  { to: "/", label: "Dashboard", icon: <Home24Regular /> },
+  { to: "/deployments", label: "Deployments", icon: <CloudFlow24Regular /> },
+  { to: "/deployment-groups", label: "Deployment Groups", icon: <ServerMultipleRegular /> },
+  { to: "/domains", label: "Domains", icon: <Globe24Regular /> },
+  { to: "/environments", label: "Environments", icon: <DatabasePlugConnectedRegular /> },
+  { to: "/runbooks", label: "Runbooks", icon: <PlayCircle24Regular /> },
+  { to: "/templates", label: "Templates", icon: <BoxMultiple24Regular /> },
+  { to: "/services", label: "Services", icon: <AppsListDetail24Regular /> },
+];
+
+export function AppShell() {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.root}>
+      <aside className={styles.sidebar}>
+        <div className={styles.brand}>
+          <Title2>Self Service Portal</Title2>
+          <Text size={200}>Core API Frontend</Text>
+        </div>
+        <nav className={styles.nav}>
+          {links.map((link) => (
+            <NavLink className={styles.navLink} end={link.to === "/"} key={link.to} to={link.to}>
+              {({ isActive }) => (
+                <Button
+                  appearance={isActive ? "primary" : "subtle"}
+                  className={styles.navButton}
+                  icon={link.icon}
+                >
+                  {link.label}
+                </Button>
+              )}
+            </NavLink>
+          ))}
+        </nav>
+      </aside>
+      <section className={styles.content}>
+        <header className={styles.topbar}>
+          <Text weight="semibold">Portal workspace</Text>
+          <Text size={200}>API: {import.meta.env.VITE_API_BASE_URL ?? "/api"}</Text>
+        </header>
+        <main className={styles.main}>
+          <Outlet />
+        </main>
+      </section>
+    </div>
+  );
+}