add some basic search functionality

web/src/components/layout/Header.tsx

@@ -1,17 +1,19 @@
 "use client";
-import { useState, useEffect, useRef } from "react";
-import { usePathname } from "next/navigation";
+import { useState, useEffect } from "react";
+import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
 import styles from "./header.module.scss";
 import { Logo, LogoIcon } from "@/components/general/Logo";
 import Icon from "../general/Icon";
 import { useInView } from "react-intersection-observer";
+import { getSearchPath } from "@/lib/common";
 
 export const Header = () => {
   const { ref: observer, inView: isInView } = useInView({
     triggerOnce: false,
     initialInView: true,
   });
+  const { replace } = useRouter();
 
   const [showMenu, setShowMenu] = useState(false);
   function toggleMenu() {
@@ -42,6 +44,17 @@ export const Header = () => {
     undefined
   );
 
+  const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key != "Enter") {
+      return;
+    }
+    const query = e.currentTarget.value;
+    if (query) {
+      setShowMenu(false);
+      replace(getSearchPath(query));
+    }
+  };
+
   return (
     <>
       <header
@@ -144,7 +157,7 @@ export const Header = () => {
               <li className={styles.search}>
                 <label>
                   <p>Søk</p>
-                  <input type="text" />
+                  <input type="text" onKeyDown={handleSearch} />
                 </label>
               </li>
               <li className={styles.galtinn}>