Create Left Sidebar layout

Igalia · Sep 18, 2023 · ad2aaa8 · ad2aaa8
1 parent b0943ba
commit ad2aaa8
Show file tree

Hide file tree

Showing 14 changed files with 1,613 additions and 276 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fluentui/react-icons": "^2.0.216",
+    "@mui/joy": "^5.0.0-beta.6",
     "@types/node": "20.6.0",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",

diff --git a/frontend/src/app/auth/AuthProvider.tsx b/frontend/src/app/auth/AuthProvider.tsx
@@ -1,8 +1,9 @@
 'use client'
 
 import { AuthProvider as AuthProviderLib } from 'react-oidc-context'
+import type { AuthProviderProps } from 'react-oidc-context'
 
-const oidcConfig = {
+const oidcConfig: AuthProviderProps = {
   authority: process.env.NEXT_PUBLIC_OIDC_AUTHORITY || '',
   client_id: process.env.NEXT_PUBLIC_OIDC_CLIENT_ID || '',
   client_secret: process.env.NEXT_PUBLIC_OIDC_CLIENT_SECRET,

diff --git a/frontend/src/app/auth/AuthorizedPage.tsx b/frontend/src/app/auth/AuthorizedPage.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useAuth, hasAuthParams } from 'react-oidc-context'
+
+export const AuthorizedPage = ({ children }: { children: React.ReactNode }) => {
+  const { isAuthenticated, signinRedirect, activeNavigator, error, isLoading } = useAuth()
+
+  useEffect(() => {
+    if (!isAuthenticated && !hasAuthParams()) {
+      signinRedirect()
+    }
+  }, [isAuthenticated, signinRedirect])
+
+  switch (activeNavigator) {
+    case 'signinSilent':
+      return <div>Signing you in...</div>
+    case 'signoutRedirect':
+      return <div>Signing you out...</div>
+  }
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (error) {
+    return <div>Oops... {error.message}</div>
+  }
+
+  if (!isAuthenticated) {
+    return <button onClick={() => signinRedirect()}>BOTAO</button>
+  }
+
+  return children
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -86,6 +86,7 @@ body {
 }
 
 body {
+  display: flex;
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(
       to bottom,

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,9 +1,15 @@
 import './globals.css'
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import { AuthProvider } from './auth/AuthProvider'
+import localFont from 'next/font/local'
+import { AuthProvider } from '@/app/auth/AuthProvider'
+import { Sidebar } from '@/ui/sidebar/Sidebar'
+import { CssVarsProvider } from '@mui/joy/styles'
+import { theme } from '@/ui/theme'
 
-const inter = Inter({ subsets: ['latin'] })
+const monaSans = localFont({
+  src: '../assets/fonts/Mona-Sans.woff2',
+  display: 'swap'
+})
 
 export const metadata: Metadata = {
   title: 'PhpReport',
@@ -13,8 +19,13 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <AuthProvider>{children}</AuthProvider>
+      <body className={monaSans.className}>
+        <AuthProvider>
+          <CssVarsProvider theme={theme}>
+            <Sidebar />
+            {children}
+          </CssVarsProvider>
+        </AuthProvider>
       </body>
     </html>
   )

diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,31 +1,9 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useAuth, hasAuthParams } from 'react-oidc-context'
-import styles from './page.module.css'
+import { AuthorizedPage } from '@/app/auth/AuthorizedPage'
 
 export default function Home() {
-  const auth = useAuth()
-
-  useEffect(() => {
-    if (!hasAuthParams() && !auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading) {
-      auth.signinRedirect()
-    }
-  }, [auth.isAuthenticated, auth.activeNavigator, auth.isLoading, auth.signinRedirect, auth])
-
-  switch (auth.activeNavigator) {
-    case 'signinSilent':
-      return <div>Signing you in...</div>
-    case 'signoutRedirect':
-      return <div>Signing you out...</div>
-  }
-
-  if (auth.isLoading) {
-    return <div>Loading...</div>
-  }
-
-  if (auth.error) {
-    return <div>Oops... {auth.error.message}</div>
-  }
-  return <main className={styles.main}>Testing auth</main>
+  return (
+    <AuthorizedPage>
+      <main>Testing auth</main>
+    </AuthorizedPage>
+  )
 }
diff --git a/frontend/src/assets/fonts/Mona-Sans.woff2 b/frontend/src/assets/fonts/Mona-Sans.woff2
diff --git a/frontend/src/assets/images/full_logo.png b/frontend/src/assets/images/full_logo.png
diff --git a/frontend/src/assets/images/small_logo.png b/frontend/src/assets/images/small_logo.png