Left panel

src/App.css

@@ -182,3 +182,21 @@
     border-right-color: var(--border);
   }
 }
+
+
+.page {
+  display: flex;      /* legger barna (aside + main) side om side i stedet for stablet */
+  align-items: flex-start;  /* gjør at sidebaren ikke strekker seg like høy som main automatisk */
+  gap: 24px;           /* luft mellom sidebar og hovedinnhold, juster selv */
+  padding-top: 32px;
+  padding-left:24px;
+}
+
+.page > main {
+  flex: 2 1 0;   /* 2 deler av 4 = 2/4 (halvparten) av siden */
+  min-width: 0;
+}
+
+.page > .page-spacer {
+  flex: 1 1 0;   /* 1 del av 4 = 1/4 av siden, samme som sidebar */
+}

src/App.tsx

@@ -1,19 +1,26 @@
 // App.tsx
-import { useState } from 'react'
-import { useCurMovies, usePopMovies } from './hooks/useMovies'
-import { Button } from './components/Button'
+import { useState } from 'react';
+import { useCurMovies, usePopMovies } from './hooks/useMovies';
+
+import { usePopularPeople } from './hooks/usePeople';
+//import { Button } from './components/Button';
+import { Sidebar} from './components/sidebar';
+import './App.css';
 
 function App() {
-  const [view, setView] = useState<'popular' | 'current'>('popular')
 
-  const popular = usePopMovies(view === 'popular')
-  const current = useCurMovies(view === 'current')
+  const [searchQuery, setSearchQuery] = useState('')
+  //const [view, setView] = useState<'popular' | 'current'>('popular')
+
+  const popular = usePopMovies()
+  const current = useCurMovies()
+  const people = usePopularPeople()
 
   const viewConfig = {
     popular: { title: 'Populære filmer', query: popular },
     current: { title: 'Nye filmer', query: current },
   }
-
+/*
   const { title, query } = viewConfig[view]
   const { data, isLoading, error } = query 
 
@@ -38,5 +45,56 @@ function App() {
     </div>
   )
 }
+*/
+
+  return (
+    <div className="page">
+      <Sidebar onSearch={setSearchQuery} />
+
+      <main>
+
+        <section id="populaere">
+          <h2>Populære filmer</h2>
+          {popular.isLoading && <p>Laster filmer...</p>}
+          {popular.error && <p>Noe gikk galt: {popular.error.message}</p>}
+          {popular.data && (
+            <ul>
+              {popular.data.results.map((movie: any) => (
+                <li key={movie.id}>{movie.title}</li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        <section id="nye-filmer">
+          <h2>Nye filmer</h2>
+          {current.isLoading && <p>Laster filmer...</p>}
+          {current.error && <p>Noe gikk galt: {current.error.message}</p>}
+          {current.data && (
+            <ul>
+              {current.data.results.map((movie: any) => (
+                <li key={movie.id}>{movie.title}</li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        <section id="skuespillere">
+          <h2>Skuespillere</h2>
+          {people.isLoading && <p>Laster skuespillere...</p>}
+          {people.error && <p>Noe gikk galt: {people.error.message}</p>}
+          {people.data && (
+            <ul>
+              {people.data.results.map((person: any) => (
+                <li key={person.id}>{person.name}</li>
+              ))}
+            </ul>
+          )}
+        </section>
+      </main>
+      <div className="page-spacer" aria-hidden="true"></div>
+    </div>
+  )
+}
 
 export default App

src/api/tmdb.ts

@@ -32,4 +32,19 @@ export async function fetchCurrentMovies() {
   )
   if (!res.ok) throw new Error('Klarte ikke hente aktuelle filmer...')
   return res.json()
+}
+//lagt til popular people
+
+export async function fetchPopularPeople() {
+  const res = await fetch(
+    `${BASE_URL}/person/popular?language=en-US&page=1`,
+    {
+      headers: {
+        accept: 'application/json',
+        Authorization: `Bearer ${TOKEN}`,
+      },
+    }
+  )
+  if (!res.ok) throw new Error('Klarte ikke hente skuespillere...')
+  return res.json()
 }

src/components/sidebar.css

@@ -0,0 +1,49 @@
+
+
+/* Skjuler elementet visuelt uten å fjerne det fra DOM-en,
+   slik at skjermlesere fortsatt leser opp teksten (f.eks. labelen over). */
+.visually-hidden {
+  position: absolute;   /* tar det ut av normal layout-flyt */
+  width: 1px;
+  height: 1px;           /* krymper det til nesten ingenting */
+  padding: 0;
+  margin: -1px;           /* trikser bort avrundingsproblemer i noen nettlesere */
+  overflow: hidden;      /* skjuler alt innhold som stikker utenfor 1x1px */
+  clip: rect(0, 0, 0, 0); /* eldre metode for å "klippe bort" innholdet visuelt */
+  white-space: nowrap;    /* hindrer teksten fra å brekke og bli synlig */
+  border: 0;
+}
+
+/* Gjør at #-lenker (som href="#populaere") scroller mykt i stedet for å hoppe brått. */
+html {
+  scroll-behavior: smooth;
+}
+
+.sidebar {
+  text-align: left;
+  flex: 1 1 0;   /* 2 del av 4 = 1/4 av siden */
+}
+
+.sidebar-search {
+  margin-bottom: 28px;   /* luft mellom søkefelt og lenkene */
+}
+
+.sidebar-search input {
+  width: 100%;
+  font-size: 18px;
+  padding: 8px 12px;
+  box-sizing: border-box;
+}
+
+.sidebar-nav {
+  list-style: none;      /* fjerner kulepunktene, som i skissen */
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;             /* avstand mellom lenkene */
+}
+
+.sidebar-nav a {
+  font-size: 28px;       /* juster tallet til det ser riktig ut */
+}

src/components/sidebar.tsx

@@ -0,0 +1,44 @@
+import './sidebar.css';
+
+
+type SidebarProps = {
+    onSearch?: (query: string) => void;
+};
+
+//under kommer seksjonene i midtkolonnen som sidebaren skal kunne hoppe mellom
+const sections = [
+    { id: "populaere", label: "Populære"},
+    { id: "nye-filmer", label: "Nye Filmer"},
+    { id: "skuespillere", label: "Skuespillere"},
+];
+
+export function Sidebar({onSearch}: SidebarProps) {
+    return (
+
+        <aside className="sidebar">
+
+            <div className="sidebar-search">
+                    <label htmlFor="movie-search" className="visually-hidden">
+                        Søk etter filmer eller skuespillere!
+                    </label>
+                <input
+                    id="movie-search"
+                    type="search"
+                    placeholder="Søk..."
+                    onChange={(e) => onSearch?.(e.target.value)}
+                    />
+            </div>
+            <nav aria-label="Innhold på siden">
+                <ul className="sidebar-nav">
+                    {sections.map((section) =>(
+                        <li key={section.id}>
+
+                    <a href={`#${section.id}`} >{section.label}</a>
+                </li>
+                    ))}
+                </ul>
+            </nav>
+        </aside>
+    );
+}
+

src/hooks/useMovies.ts

@@ -2,18 +2,17 @@
 import { useQuery } from '@tanstack/react-query'
 import { fetchCurrentMovies, fetchPopularMovies } from '../api/tmdb'
 
-export function usePopMovies(enabled: boolean) {
+export function usePopMovies() {
   return useQuery({
     queryKey: ['movies', 'popular'],
     queryFn: fetchPopularMovies,
-    enabled,
   })
 }
 
-export function useCurMovies(enabled: boolean) {
+export function useCurMovies() {
   return useQuery({
     queryKey: ['movies', 'current'],
     queryFn: fetchCurrentMovies,
-    enabled,
+
   })
 }

src/hooks/usePeople.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query'
+import { fetchPopularPeople } from '../api/tmdb'
+
+export function usePopularPeople() {
+  return useQuery({
+    queryKey: ['people', 'popular'],
+    queryFn: fetchPopularPeople,
+  })
+}

src/index.css

@@ -51,15 +51,13 @@
 }
 
 #root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
+  width: 100%;
+  margin: 0;
   min-height: 100svh;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  text-align: center;
 }
 
 body {