Add navbar and footer (#2953)

sofieregine · web-flow · commit 5e518b6b4fcb · 2026-02-25T20:39:45.000+01:00
diff --git a/apps/grades-frontend/src/app/Footer.tsx b/apps/grades-frontend/src/app/Footer.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import { Text } from "@dotkomonline/ui"
+
+export const Footer = () => {
+  return (
+    <header className="sticky backdrop-blur-xl top-4 z-50 flex flex-row justify-between items-center w-full max-w-screen-xl mt-4 p-3 rounded-full text-l font-mono font-bold">
+      <Text>Til studentene ved NTNU, med kjærlighet, Online &lt;3</Text>
+      <Text>Laget av Dotkom</Text>
+    </header>
+  )
+}
diff --git a/apps/grades-frontend/src/app/Navbar.tsx b/apps/grades-frontend/src/app/Navbar.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import Link from "next/link"
+import { Title } from "@dotkomonline/ui"
+
+export const Navbar = () => {
+  return (
+    <header className="sticky backdrop-blur-xxl top-4 underline z-50 flex justify-between w-full items-end max-w-screen-xl mt-4 p-4 rounded-full font-mono font-bold">
+      <div className="flex items-baseline space-x-4">
+        <Title className="text-2xl">Grades</Title>
+
+        <Link href="/" className="text-ml">
+          Emner
+        </Link>
+      </div>
+
+      <div className="space-x-4">
+        <Link href="/" className="text-ml">
+          Om siden
+        </Link>
+        <Link href="/" className="text-ml">
+          Logg inn
+        </Link>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/grades-frontend/src/app/layout.tsx b/apps/grades-frontend/src/app/layout.tsx
@@ -5,19 +5,23 @@ import "../globals.css"
 import { setDefaultOptions as setDateFnsDefaultOptions } from "date-fns"
 import { nb } from "date-fns/locale"
 import PlausibleProvider from "next-plausible"
+import { Navbar } from "./Navbar"
+import { Footer } from "./Footer"
 
 setDateFnsDefaultOptions({ locale: nb })
 
 export default async function RootLayout({ children }: PropsWithChildren) {
   return (
     // suppressHydrationWarning is needed for next-themes, see https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
     <html lang="no" suppressHydrationWarning>
-      <body>
+      <body className="dark:bg-[#141821] bg-pink-400">
         <PlausibleProvider domain="grades.no">
           <QueryProvider>
             <ThemeProvider defaultTheme="system" enableSystem attribute="data-theme">
               <div className="min-h-screen flex flex-col gap-8 w-full max-w-screen-xl mx-auto px-4 lg:px-12">
+                <Navbar />
                 <main className="grow">{children}</main>
+                <Footer />
               </div>
             </ThemeProvider>
           </QueryProvider>
