feat(navigation): Add aside menu (#28)

src/components/authenticated-user.tsx

@@ -13,7 +13,7 @@ const AuthenticatedUser = () => {
         ></div>
         <div>
           <div>{session.user.name}</div>
-          <button className="link text-xs" onClick={() => signOut()}>
+          <button className="link text-sm" onClick={() => signOut()}>
             Déconnexion
           </button>
         </div>

src/components/menu.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link"
+
+const Menu = () => (
+  <ul className="menu">
+    <li>
+      <Link href="/">
+        <a>Users</a>
+      </Link>
+    </li>
+    <li>
+      <Link href="/service/matomo">
+        <a>Matomo</a>
+      </Link>
+    </li>
+    <li>
+      <Link href="/service/sentry">
+        <a>Sentry</a>
+      </Link>
+    </li>
+    <li>
+      <Link href="/service/ovh">
+        <a>OVH</a>
+      </Link>
+    </li>
+    <li>
+      <Link href="/service/mattermost">
+        <a>Mattermost</a>
+      </Link>
+    </li>
+    <li>
+      <Link href="/service/pastek">
+        <a>Pastek</a>
+      </Link>
+    </li>
+    <li>
+      <Link href="/service/nextCloud">
+        <a>NextCloud</a>
+      </Link>
+    </li>
+  </ul>
+)
+
+export default Menu

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import type { AppProps } from "next/app"
 import { SessionProvider } from "next-auth/react"
 
+import Menu from "@/components/menu"
 import Header from "@/components/header"
 
 import "@/styles/tailwind.scss"
@@ -10,8 +11,13 @@ function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   return (
     <SessionProvider session={session}>
       <Header />
-      <Component {...pageProps} />
-      {/* <Footer /> */}
+      <div className="container">
+        <aside>
+          <Menu />
+        </aside>
+        <Component {...pageProps} />
+        {/* <Footer /> */}
+      </div>
     </SessionProvider>
   )
 }

src/pages/index.tsx

@@ -2,8 +2,6 @@ import { useSession } from "next-auth/react"
 
 import Login from "@/components/login"
 import { GithubUsersLoader } from "@/services/github"
-import { MatomoUsersLoader } from "@/services/matomo"
-import { SentryUsersLoader } from "@/services/sentry"
 
 const Page = () => {
   const { data: session } = useSession()
@@ -19,18 +17,10 @@ const Page = () => {
   }
 
   return (
-    <div className="container">
-      <main>
-        <h2>Github</h2>
-        <GithubUsersLoader />
-        <br />
-        <h2>Matomo</h2>
-        <MatomoUsersLoader />
-        <br />
-        <h2>Sentry</h2>
-        <SentryUsersLoader />
-      </main>
-    </div>
+    <main>
+      <h2>Github</h2>
+      <GithubUsersLoader />
+    </main>
   )
 }
 

src/pages/service/[slug].tsx

@@ -0,0 +1,60 @@
+import { useRouter } from "next/router"
+import { MatomoUsersLoader } from "@/services/matomo"
+import { SentryUsersLoader } from "@/services/sentry"
+
+interface Services {
+  [key: string]: Service
+}
+
+interface Service {
+  name: string
+  Component: () => JSX.Element
+}
+
+const services = {
+  matomo: {
+    name: "Matomo",
+    Component: MatomoUsersLoader,
+  },
+  sentry: {
+    name: "Sentry",
+    Component: SentryUsersLoader,
+  },
+  ovh: {
+    name: "OVH",
+    Component: MatomoUsersLoader,
+  },
+  mattermost: {
+    name: "Mattermost",
+    Component: MatomoUsersLoader,
+  },
+  pastek: {
+    name: "pastek",
+    Component: MatomoUsersLoader,
+  },
+  nextcloud: {
+    name: "NextCloud",
+    Component: MatomoUsersLoader,
+  },
+} as Services
+
+const Page = () => {
+  const { query } = useRouter()
+  const slug = Array.isArray(query.slug) ? query.slug[0] : query.slug
+
+  if (slug) {
+    const { name, Component } = services[slug]
+
+    return (
+      <main>
+        <h2>{name}</h2>
+        <br />
+        <Component />
+      </main>
+    )
+  }
+
+  return <></>
+}
+
+export default Page

src/styles/components/common/authenticated-user.scss

@@ -6,6 +6,6 @@
   }
 
   & > div:last-child {
-    @apply text-sm leading-4 -mt-0.5;
+    @apply leading-4 -mt-0.5;
   }
 }

src/styles/globals.scss

@@ -3,3 +3,7 @@
 @use "./components/common/authenticated-user.scss";
 @use "./components/logo.scss";
 @use "./components/header.scss";
+
+aside {
+  @apply pr-10 mr-10 border border-y-0 border-l-0;
+}