feat(#51): Koble sammen sider og implementere felles navigasjon

frontend/index.html

@@ -1,10 +1,17 @@
 <!doctype html>
-<html lang="en">
+<html lang="nb">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/favicon.svg"
+    />
+    <title>Handlelappen</title>
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -13,7 +13,8 @@
     "@apollo/client": "^4.3.2",
     "graphql": "^16.14.2",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-router": "^8.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",

frontend/src/App.css

@@ -1,79 +1,27 @@
-/* Hjemskjerm – styling etter Figma (Handlelappen – notatbok).
-   Farger og skrift kommer fra styles/theme.css. */
+/* =========================================
+   APP – FELLES LAYOUT
+   Issue #51
+   ========================================= */
 
+html,
+body,
 #root {
   width: 100%;
-  min-height: 100vh;
+  min-width: 0;
+  min-height: 100%;
   margin: 0;
   padding: 0;
 }
 
-main {
-  width: 100%;
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 32px;
-  box-sizing: border-box;
-}
-
-/* Søkefelt + knapp */
-.search {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 1.5rem;
-}
-
-.search input {
-  flex: 1;
-  max-width: 480px;
-  padding: 10px 14px;
-  font: 15px var(--font-ui);
-  color: var(--text-primary);
-  background: var(--bg-surface);
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
-}
-
-.search input:focus {
-  outline: 2px solid var(--text-accent);
-  outline-offset: 2px;
-}
-
-.search button {
-  background: var(--bg-primary);
-  color: var(--text-on-dark);
+#root {
+  max-width: none;
   border: none;
-  border-radius: 8px;
-  padding: 10px 16px;
-  font: 500 15px var(--font-ui);
-  cursor: pointer;
-}
-
-/* Produktliste */
-.product-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
   text-align: left;
+  display: block;
 }
 
-.product {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid var(--border-hairline);
+body {
+  background: var(--bg-page);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
 }
-
-.product img,
-.no-image {
-  width: 64px;
-  height: 64px;
-  object-fit: contain;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-brand);
-  border-radius: 6px;
-  flex-shrink: 0;
-}