Shopping cart modal window

whitewash/package.json

@@ -14,6 +14,7 @@
 		"@emotion/react": "^11.14.0",
 		"@emotion/styled": "^11.14.1",
 		"@mui/material": "^7.3.4",
+		"material-ui-popup-state": "^5.3.6",
 		"@tanstack/react-query": "^5.90.5",
 		"next": "15.5.6",
 		"react": "19.1.0",

whitewash/src/app/components/header/header.tsx → whitewash/src/app/components/header/Header.tsx

@@ -5,9 +5,10 @@ import dinner from "@public/header-icons/dinner.svg"
 import sale from "@public/header-icons/sale.svg"
 import gps from "@public/header-icons/gps.svg"
 import globe from "@public/header-icons/globe.svg"
-import { HeaderItem } from "./headerItem"
+import { HeaderItem } from "./HeaderItem"
 import Link from "next/link"
 import { type FormEvent, useState } from "react"
+import { ShoppingCartPreview } from "./ShoppingCartPreview"
 
 export function Header() {
 	const [searchInput, setSearchInput] = useState("")
@@ -20,7 +21,7 @@ export function Header() {
 	}
 
 	return (
-		<div className="h-22.5 bg-rema-blue flex flex-row items-center justify-evenly px-5 text-white gap-5">
+		<div className="h-22.5 bg-rema-blue flex flex-row items-center justify-evenly px-8 text-white gap-5">
 			<Link href="/">
 				<Image src={logo} alt={"REMA 1000"} />
 			</Link>
@@ -52,10 +53,7 @@ export function Header() {
 					Søk
 				</button>
 			</form>
-
-			<Link className="font-bold" href="/handleliste">
-				Handleliste
-			</Link>
+			<ShoppingCartPreview />
 		</div>
 	)
 }

whitewash/src/app/components/header/headerItem.tsx → whitewash/src/app/components/header/HeaderItem.tsx

@@ -8,7 +8,7 @@ type headerItemProps = {
 	title: string
 }
 
-export function HeaderItem(props: headerItemProps) {
+export const HeaderItem = (props: headerItemProps) => {
 	return (
 		<div className="mr-8">
 			<Link className="flex flex-row" href={`/${props.link}`}>

whitewash/src/app/components/header/ShoppingCartPreview.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { useState } from "react"
+import receipt from "@public/header-icons/receipt.svg"
+import Image from "next/image"
+import Link from "next/link"
+
+export const ShoppingCartPreview = () => {
+	const [open, setOpen] = useState(false)
+
+	return (
+		<div>
+			<button
+				onClick={() => setOpen(!open)}
+				onKeyUp={() => setOpen(!open)}
+				className="font-bold flex justify-center hover:bg-rema-secondary-darkblue focus:outline-3 p-1.5 rounded-sm items-center ease-in-out duration-150 transition-all"
+				type="button"
+			>
+				<span>Handlelapp</span>
+				<Image src={receipt} alt="En Handlelapp" />
+			</button>
+
+			{open && (
+				<div
+					id="bg"
+					onClick={() => setOpen(false)}
+					onKeyUp={() => setOpen(false)}
+					className="absolute inset-0 top-22.5 z-30 bg-black/20 duration-150 ease-in-out transition-all"
+					role="menu"
+				>
+					<div
+						id="menu"
+						onClick={(e) => e.stopPropagation()}
+						onKeyUp={(e) => e.stopPropagation()}
+						className="absolute right-0 h-full w-md bg-white shadow-lg p-4 z-50 text-center"
+						role="menubar"
+					>
+						<div className="flex flex-col gap-3 items-center justify-center h-full text-black">
+							<span className="font-header text-rema-blue text-4xl">
+								Her kommer det snart mer informasjon om handlelappen din!
+							</span>
+							<span>
+								Vi utvikler nye systemer for å gjøre din handleopplevelse enda
+								bedre!{" "}
+							</span>
+							<span>Har du noen spørsmål? Spør Oddy, da vel!</span>
+							<span>
+								I mellomtiden kan du også besøke{" "}
+								<Link href="/handleliste" className="text-rema-blue font-bold">
+									Handlelappsiden
+								</Link>
+							</span>
+
+							<button
+								onClick={() => setOpen(false)}
+								onKeyUp={() => setOpen(!open)}
+								className="font-bold bg-rema-blue text-white hover:bg-rema-secondary-darkblue focus:outline-3 p-1.5 mt-3 rounded-sm items-center ease-in-out duration-150 transition-all"
+								type="button"
+							>
+								Lukk Meny
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}

whitewash/src/app/components/oddy/Oddy.tsx

@@ -33,7 +33,7 @@ export const Oddy = ({
 	return (
 		<div
 			id="chat-container"
-			className="flex flex-col items-end gap-3 z-50 fixed bottom-6 right-6"
+			className="flex flex-col items-end gap-3 z-40 fixed bottom-6 right-6"
 		>
 			<button type="button" onClick={onClick} className="cursor-pointer">
 				<Image

whitewash/src/app/globals.css

@@ -1,3 +1,4 @@
+@layer theme, base, mui, components, utilities;
 @import "tailwindcss";
 
 :root {

whitewash/src/app/not-found.tsx

@@ -3,7 +3,7 @@
 import Image from "next/image"
 import frog from "@/assets/images/frog.png"
 import prideFrog from "@/assets/images/pride-froggy.png"
-import { Header } from "@/components/header/header"
+import { Header } from "@/components/header/Header"
 import Link from "next/link"
 import { useEffect, useState } from "react"
 

whitewash/src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { Header } from "@/components/header/header"
+import { Header } from "@/components/header/Header"
 import { OddyChat } from "./components/chat/OddyChat"
 import { Oddy } from "./components/oddy/Oddy"
 import Popover from "@mui/material/Popover"