Animasjon i header

client/src/components/layout/BottomNav.tsx

@@ -12,6 +12,8 @@ import type { SvgIconComponent } from '@mui/icons-material';
 import { useCurrentUser } from '../../lib/useCurrentUser';
 import { LoginRequiredDialog } from './LoginRequiredDialog';
 import { NewRecipeButton } from './NewRecipeButton';
+import { motion } from 'motion/react';
+import { quick } from '../../lib/motion';
 
 // rosa fokusring
 const FOCUS_RING =
@@ -42,11 +44,19 @@ function TabLink({
     <NavLink to={to} className={tabClass}>
       {({ isActive }) => (
         <>
-          {isActive ? (
-            <ActiveIcon aria-hidden="true" />
-          ) : (
-            <Icon aria-hidden="true" />
-          )}
+          {/* ikonet popper når siden blir aktiv */}
+          <motion.span
+            className="flex"
+            initial={false}
+            animate={{ scale: isActive ? [1, 1.25, 1] : 1 }}
+            transition={quick}
+          >
+            {isActive ? (
+              <ActiveIcon aria-hidden="true" />
+            ) : (
+              <Icon aria-hidden="true" />
+            )}
+          </motion.span>
           {label}
         </>
       )}

client/src/components/layout/MobileHeader.tsx

@@ -1,7 +1,9 @@
 import { useState } from 'react';
 import { Link } from 'react-router';
 import SearchIcon from '@mui/icons-material/Search';
+import { AnimatePresence, motion } from 'motion/react';
 import SearchBar from './SearchBar';
+import { quick } from '../../lib/motion';
 
 type MobileHeaderProps = {
   query: string;
@@ -15,37 +17,56 @@ export function MobileHeader({ query }: MobileHeaderProps) {
   return (
     <header className="sticky top-0 z-40 border-b border-secondary bg-background desktop:hidden">
       <div className="flex items-center justify-between gap-4 px-4 py-2">
-        {/* søkefeltet tar hele linja når det er åpent */}
-        {searchOpen ? (
-          <div
-            className="flex flex-1 justify-center"
-            onKeyDown={(event) =>
-              event.key === 'Escape' && setSearchOpen(false)
-            }
-            onBlur={(event) => {
-              // lukker når man trykker utenfor
-              if (!event.currentTarget.contains(event.relatedTarget)) {
-                setSearchOpen(false);
+        {/* logoen tones ut før søkefeltet tones inn */}
+        <AnimatePresence mode="wait" initial={false}>
+          {searchOpen ? (
+            // søkefeltet tar hele linja når det er åpent
+            <motion.div
+              key="sok"
+              className="flex flex-1 justify-center"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={quick}
+              onKeyDown={(event) =>
+                event.key === 'Escape' && setSearchOpen(false)
               }
-            }}
-          >
-            <SearchBar initialQuery={query} inputId="mobile-search" autoFocus />
-          </div>
-        ) : (
-          <>
-            <Link to="/" className="font-heading text-4xl text-primary">
-              Oppskriftsbok
-            </Link>
-            <button
-              type="button"
-              onClick={() => setSearchOpen(true)}
-              aria-label="Søk"
-              className="flex cursor-pointer rounded-full p-1 text-3xl text-primary transition-colors hover:bg-pink-light focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-light"
+              onBlur={(event) => {
+                // lukker når man trykker utenfor
+                if (!event.currentTarget.contains(event.relatedTarget)) {
+                  setSearchOpen(false);
+                }
+              }}
             >
-              <SearchIcon fontSize="inherit" aria-hidden="true" />
-            </button>
-          </>
-        )}
+              <SearchBar
+                initialQuery={query}
+                inputId="mobile-search"
+                autoFocus
+              />
+            </motion.div>
+          ) : (
+            <motion.div
+              key="logo"
+              className="flex flex-1 items-center justify-between gap-4"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={quick}
+            >
+              <Link to="/" className="font-heading text-4xl text-primary">
+                Oppskriftsbok
+              </Link>
+              <button
+                type="button"
+                onClick={() => setSearchOpen(true)}
+                aria-label="Søk"
+                className="flex cursor-pointer rounded-full p-1 text-3xl text-primary transition-colors hover:bg-pink-light focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-light"
+              >
+                <SearchIcon fontSize="inherit" aria-hidden="true" />
+              </button>
+            </motion.div>
+          )}
+        </AnimatePresence>
       </div>
     </header>
   );

client/src/components/layout/NavMenu.tsx

@@ -8,6 +8,8 @@ import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import type { SvgIconComponent } from '@mui/icons-material';
 import { useCurrentUser } from '../../lib/useCurrentUser';
 import { LoginRequiredDialog } from './LoginRequiredDialog';
+import { motion } from 'motion/react';
+import { glide } from '../../lib/motion';
 
 // rosa fokusring
 const FOCUS_RING =
@@ -32,7 +34,7 @@ type MenuLinkProps = {
   compact: boolean;
 };
 
-// bytter ikon og understreker teksten på aktiv side
+// bytter ikon og viser aktiv side
 function MenuLink({
   to,
   label,
@@ -49,12 +51,18 @@ function MenuLink({
           ) : (
             <Icon aria-hidden="true" />
           )}
-          <span
-            className={`${isActive ? 'underline underline-offset-4' : ''} ${
-              compact ? COMPACT_LABEL : ''
-            }`}
-          >
-            {label}
+          <span className={compact ? COMPACT_LABEL : ''}>
+            <span className="relative">
+              {label}
+              {/* streken glir til siden man er på */}
+              {isActive && (
+                <motion.span
+                  layoutId={compact ? 'meny-strek-liten' : 'meny-strek'}
+                  transition={glide}
+                  className="absolute inset-x-0 -bottom-1 h-0.5 rounded-full bg-primary"
+                />
+              )}
+            </span>
           </span>
         </>
       )}

client/src/components/layout/StickyHeader.tsx

@@ -28,8 +28,8 @@ export function StickyHeader({ visible, query }: StickyHeaderProps) {
   return (
     <header
       inert={!visible}
-      className={`fixed inset-x-0 top-0 z-40 hidden border-b border-secondary bg-background transition-transform duration-300 desktop:block ${
-        visible ? 'translate-y-0' : '-translate-y-full'
+      className={`fixed inset-x-0 top-0 z-40 hidden border-b border-secondary bg-background transition-[translate,opacity] duration-300 ease-out motion-reduce:transition-none desktop:block ${
+        visible ? 'translate-y-0 opacity-100' : '-translate-y-full opacity-0'
       }`}
     >
       <div className="mx-auto flex max-w-7xl items-center gap-8 px-6 py-2">