(SP: 1) [UI] Shop header nav: add Home link + align hover/active styling with platform

Author: liudmylasovetovs

frontend/components/header/AppMobileMenu.tsx

@@ -16,7 +16,11 @@ type Props = {
   showAdminLink?: boolean;
 };
 
-export function AppMobileMenu({ variant, userExists, showAdminLink = false }: Props) {
+export function AppMobileMenu({
+  variant,
+  userExists,
+  showAdminLink = false,
+}: Props) {
   const [open, setOpen] = useState(false);
 
   const close = () => setOpen(false);
@@ -65,6 +69,16 @@ export function AppMobileMenu({ variant, userExists, showAdminLink = false }: Pr
             className="fixed left-0 right-0 top-16 z-50 border-t border-border bg-background px-4 py-4 md:hidden"
           >
             <div className="flex flex-col gap-1">
+              {variant === 'shop' ? (
+                <Link
+                  href="/"
+                  onClick={close}
+                  className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                >
+                  Home
+                </Link>
+              ) : null}
+
               {links.map(link => (
                 <Link
                   key={link.href}

frontend/components/header/UnifiedHeader.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { LogIn, Search, User, Home } from 'lucide-react';
+import { LogIn, Search, User } from 'lucide-react';
 import { Link } from '@/i18n/routing';
 import { SITE_LINKS } from '@/lib/navigation';
 
@@ -51,9 +51,16 @@ export function UnifiedHeader({
           </Link>
         </div>
 
-        <nav className="hidden items-center justify-center md:flex">
+        <nav
+          className="hidden items-center justify-center md:flex"
+          aria-label="Primary"
+        >
           {isShop ? (
-            <NavLinks className="md:flex" showAdminLink={showAdminLink} />
+            <NavLinks
+              className="md:flex"
+              showAdminLink={showAdminLink}
+              includeHomeLink
+            />
           ) : (
             <div className="flex items-center gap-1">
               {SITE_LINKS.map(link => (
@@ -71,17 +78,6 @@ export function UnifiedHeader({
 
         <div className="flex items-center gap-1">
           <div className="hidden items-center gap-2 md:flex">
-            {isShop ? (
-              <Link
-                href="/"
-                aria-label="Back to main site"
-                className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-              >
-                <Home className="h-5 w-5" />
-              </Link>
-            ) : (
-              <div className="h-9 w-9 flex-shrink-0" aria-hidden="true" />
-            )}
             {isShop && enableSearch ? (
               <>
                 <button

frontend/components/shop/header/nav-links.tsx

@@ -26,15 +26,43 @@ interface NavLinksProps {
   className?: string;
   onNavigate?: () => void;
   showAdminLink?: boolean;
+  includeHomeLink?: boolean; // NEW
 }
 
-export function NavLinks({ className, onNavigate, showAdminLink = false }: NavLinksProps) {
-  const pathname = usePathname(); 
+export function NavLinks({
+  className,
+  onNavigate,
+  showAdminLink = false,
+  includeHomeLink = false,
+}: NavLinksProps) {
+  const pathname = usePathname();
   const searchParams = useSearchParams();
   const currentCategory = searchParams.get('category');
 
+  const baseLink =
+    'rounded-md px-3 py-2 text-sm font-medium transition-colors ' +
+    'hover:bg-muted/50 hover:text-foreground ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-background';
+
+  const isHomeActive = pathname === '/';
+
   return (
-    <nav className={cn('items-center gap-1', className)}>
+    <nav className={cn('flex items-center gap-1', className)} aria-label="Shop categories">
+      {includeHomeLink ? (
+        <Link
+          href="/"
+          onClick={onNavigate}
+          aria-current={isHomeActive ? 'page' : undefined}
+          className={cn(
+            baseLink,
+            isHomeActive ? 'bg-muted text-foreground' : 'text-muted-foreground'
+          )}
+        >
+          Home
+        </Link>
+      ) : null}
+
       {NAV_LINKS.map(link => {
         const [linkPath, linkQuery] = link.href.split('?');
         const linkParams = new URLSearchParams(linkQuery ?? '');
@@ -49,9 +77,10 @@ export function NavLinks({ className, onNavigate, showAdminLink = false }: NavLi
             key={link.href}
             href={link.href}
             onClick={onNavigate}
+            aria-current={isActive ? 'page' : undefined}
             className={cn(
-              'px-3 py-2 text-sm font-medium transition-colors hover:text-foreground',
-              isActive ? 'text-foreground' : 'text-muted-foreground',
+              baseLink,
+              isActive ? 'bg-muted text-foreground' : 'text-muted-foreground'
             )}
           >
             {link.label}
@@ -63,7 +92,7 @@ export function NavLinks({ className, onNavigate, showAdminLink = false }: NavLi
         <Link
           href="/shop/admin/products/new"
           onClick={onNavigate}
-          className="text-sm text-muted-foreground hover:text-foreground"
+          className={cn(baseLink, 'text-muted-foreground')}
         >
           New product
         </Link>