Sidebar endringer m dropdown, samt favorites

src/App.tsx

@@ -19,8 +19,14 @@ import { Sidebar } from './components/Sidebar';
 // Movie type, holder all informajson om en film
 import type { Movie } from './types/tmdb';
 
+
+//importerer favoritespage siden
+import { FavoritesPage } from './components/FavoritesPage';
+
 import './App.css';
 
+
+
 function App() {
   // brukes for å kunne velge film å vise detaljer om
   const [selectedMovie, setSelectedMovie] = useState<Movie | null>(null);
@@ -40,11 +46,16 @@ function App() {
   // favorite-funksjonalitet
   const { isFavorite, toggleFavorite} = useFavorites();
 
+  //Dette er for FavoritesPage siden
+  const [view, setView] = useSessionStorage<'hjem' | 'favoritter'>('view', 'hjem');
+
   return (
     <div className="page">
-        <Sidebar onSearch={setQuery} searchValue={query} />
+        <Sidebar onSearch={setQuery} searchValue={query} view={view} onViewChange={setView} />
+
 
       <main>   
+
         <SortFilterBar
           sortBy={sortBy}
           onSortChange={setSortBy}
@@ -53,6 +64,8 @@ function App() {
         />
         {isSearching ? (
           <SearchLayout query={query} search={search} isFavorite={isFavorite} toggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />
+        ) : view === 'favoritter' ? (
+          <FavoritesPage />
         ) : (
           <MainLayout isFavorite={isFavorite} toggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />
         )}

src/components/FavoritesPage.tsx

@@ -0,0 +1,8 @@
+export function FavoritesPage() {
+  return (
+    <section id="favoritter">
+      <h2>Favoritter</h2>
+      <p>Ingen favoritter vises ennå.</p>
+    </section>
+  );
+}

src/components/Sidebar.css

@@ -48,3 +48,62 @@ html {
   outline-offset: 2px;
 }
 
+
+
+
+.sidebar-nav__home {
+  display: flex;                  /* var block - flex lar pila ligge helt til høyre */
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font: inherit;
+  font-size: 17px;
+  font-weight: 600;               /* HOME er overordnet, så litt tyngre enn underpunktene */
+  padding: 10px 14px;
+  border: none;
+  background: none;
+  color: var(--text-h);
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.sidebar-nav__home:hover {
+  background: var(--accent-bg);
+  color: var(--accent);
+}
+
+.sidebar-nav__home:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Pila som viser om menyen er åpen */
+.sidebar-nav__home[aria-expanded]::after {
+  content: "▾";
+  display: inline-block;          /* transform virker ikke på inline-elementer */
+  font-size: 13px;
+  transition: transform 0.2s ease;
+}
+
+.sidebar-nav__home[aria-expanded="false"]::after {
+  transform: rotate(-90deg);      /* peker til siden når menyen er lukket */
+}
+
+.sidebar-nav__sub {
+  list-style: none;
+  margin: 4px 0 0 20px;
+  padding-left: 10px;
+  border-left: 2px solid var(--border);  /* loddrett strek som binder punktene til HOME */
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar-nav__sub a {
+  font-size: 15px;
+  color: var(--text);             /* svakere enn HOME, så hierarkiet synes */
+}
+
+.sidebar-nav__sub a:hover {
+  color: var(--accent);
+}

src/components/Sidebar.tsx

@@ -1,43 +1,87 @@
+import { useState } from 'react';
 import { SearchField } from './SearchField';
 import './Sidebar.css';
 
 type SidebarProps = {
     onSearch?: (query: string) => void;
     searchValue?: string;
+    view: 'hjem' | 'favoritter';
+    onViewChange: (view: 'hjem' | 'favoritter') => void;
 };
 
-//under kommer seksjonene i midtkolonnen som sidebaren skal kunne hoppe mellom
+// Underpunktene som vises når HOME er åpen
 const sections = [
-    { id: "populaere", label: "Populære" },
-    { id: "nye-filmer", label: "Nye Filmer" },
-    { id: "skuespillere", label: "Skuespillere" },
+    { id: "populaere", label: "Populære filmer" },
+    { id: "nye-filmer", label: "Kommende filmer" },
 ];
 
-export function Sidebar({ onSearch, searchValue }: SidebarProps) {
-    return (
+export function Sidebar({ onSearch, searchValue, view, onViewChange }: SidebarProps) {
+    const [isOpen, setIsOpen] = useState(true);
+
+    // Tømmer søket, bytter tilbake til hjem-visningen og scroller.
+    // Timeouten venter til React har rendret seksjonene tilbake - de finnes
+    // ikke i DOM-en mens søkeresultater eller favoritter vises.
+    function goToSection(id: string) {
+        onSearch?.('');
+        onViewChange('hjem');
+        setTimeout(() => {
+            if (id === 'hjem') {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            } else {
+                document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+            }
+        }, 0);
+    }
 
+    return (
         <aside className="sidebar">
 
             <SearchField value={searchValue ?? ''} onChange={(v) => onSearch?.(v)} />
 
             <nav aria-label="Innhold på siden">
                 <ul className="sidebar-nav">
-                    {sections.map((section) => (
-                        <li key={section.id}>
-                            <a
-                                href={`#${section.id}`}
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    onSearch?.('');
-                                    setTimeout(() => {
-                                        document.getElementById(section.id)?.scrollIntoView({ behavior: 'smooth' });
-                                    }, 0);
-                                }}
-                            >
-                                {section.label}
-                            </a>
-                        </li>
-                    ))}
+
+                    <li>
+                        {/* button og ikke a, fordi den utfører en handling (åpne/lukke).
+                            aria-expanded gjør at skjermlesere sier "utvidet"/"sammenslått"
+                            i stedet for bare "HOME". */}
+                        <button
+                            type="button"
+                            className="sidebar-nav__home"
+                            aria-expanded={isOpen}
+                            onClick={() => {
+                                setIsOpen(!isOpen);
+                                goToSection('hjem');
+                            }}
+                        >
+                            HOME
+                        </button>
+
+                        {/* Underlista rendres kun når isOpen er true */}
+                        {isOpen && (
+                            <ul className="sidebar-nav__sub">
+                                {sections.map((section) => (
+                                    <li key={section.id}>
+                                        <a href={`#${section.id}`} onClick={(e) => { e.preventDefault(); goToSection(section.id); }}>
+                                            {section.label}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </li>
+
+                    <li>
+                        <button
+                            type="button"
+                            className="sidebar-nav__home"
+                            aria-current={view === 'favoritter' ? 'page' : undefined}
+                            onClick={() => { onSearch?.(''); onViewChange('favoritter'); }}
+                        >
+                            FAVORITTER
+                        </button>
+                    </li>
+
                 </ul>
             </nav>
         </aside>