(SP: 3) [Frontend] Refactor Header UI and navigation states

[YNazymko12]

• Add icon to the language switcher

• Add GitHub icon with stars indicator (frontend only)

• Update logo styles

• Improve touch interaction styles

• Verify correct placement and alignment of all header components

• Make mobile header modal full-screen

• Disable background scroll when mobile menu is open

• Highlight active navigation item

• Update navigation styles:

• Highlight Shop link when user is on Home pages

• Highlight Home link when user is on Shop pages

• Style changes only, no routing or logic changes

Summary by CodeRabbit

• New Features

  • Added a platform/shop/blog header with responsive desktop and mobile action areas, animated navigation links, header buttons, logo component, and a GitHub star counter (feeds from a new stats API).

• Improvements

  • Smoother mobile menu animations with scroll locking and restored scroll position.
  • Richer login/logout visuals, translations, and clearer active states.
  • Simplified blog/category navigation and header composition.

• Style Updates

  • New logo CSS variable, container utility, shimmer animation, and tweaks to hero/footer styling.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	0bf255c
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/69761e41197c960008d164a4
😎 Deploy Preview	https://deploy-preview-201--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a new GET API route at frontend/app/api/stats/route.ts, a modular header refactor (DesktopNav, DesktopActions, MobileActions, NavLink), new shared UI components (AnimatedNavLink, HeaderButton, Logo, GitHubStarButton), mobile menu animation/scroll-lock, and various styling updates.

Changes

Cohort / File(s)	Summary
API Route frontend/app/api/stats/route.ts	New GET handler that calls getPlatformStats() and returns JSON or a 500 error on failure.
Shared UI components frontend/components/shared/AnimatedNavLink.tsx, frontend/components/shared/HeaderButton.tsx, frontend/components/shared/Logo.tsx, frontend/components/shared/GitHubStarButton.tsx	New client components: animated nav link, layered header button, gradient Logo, and GitHubStarButton which fetches /api/stats and animates star counts.
Header navigation components frontend/components/header/NavLink.tsx, frontend/components/header/DesktopNav.tsx, frontend/components/header/DesktopActions.tsx, frontend/components/header/MobileActions.tsx	New components to compute active links and render variant-specific navigation and action areas (platform/shop/blog).
Header core refactor frontend/components/header/UnifiedHeader.tsx, frontend/components/header/AppMobileMenu.tsx, frontend/components/header/MainSwitcher.tsx	UnifiedHeader delegates to modular components; AppMobileMenu adds open/close animation, overlay, delayed hide, and body scroll lock; MainSwitcher refines home detection.
Nav & auth updates frontend/components/blog/BlogCategoryLinks.tsx, frontend/components/shop/header/nav-links.tsx, frontend/components/auth/logoutButton.tsx	Replace plain Links with AnimatedNavLink/HeaderButton, adjust spacing and active-state handling; logout button uses translations and enhanced styling.
Styling & theme frontend/app/globals.css, frontend/components/shared/Footer.tsx, frontend/components/shared/LanguageSwitcher.tsx, frontend/components/shared/HeroSection.tsx, frontend/components/theme/ThemeToggle.tsx	Add --logo-foreground, .container-main, shimmer keyframes; minor animation and theme variable tweaks and spacing adjustments.
Navigation constants frontend/lib/navigation.ts	Reordered SITE_LINKS to move /blog after /about.

Sequence Diagram(s)

sequenceDiagram
  participant Browser as Browser
  participant UI as GitHubStarButton
  participant API as /api/stats
  participant Service as getPlatformStats

  Browser->>UI: mount
  UI->>API: GET /api/stats
  API->>Service: call getPlatformStats()
  Service-->>API: return stats (e.g., githubStars)
  API-->>UI: JSON { githubStars }
  UI->>UI: animate counter 0 → githubStars
  UI-->>Browser: update DOM (star count)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~28 minutes

Possibly related issues

• (SP: 3) [Frontend] Refactor Header UI #189: Header UI refactor and GitHubStarButton behavior align with this PR's header and stats changes.

Possibly related PRs

• feat(header): update header actions and add dashboard link #73: Overlaps changes to frontend/lib/navigation.ts and header actions (dashboard link).
• feat(header): refine site header actions and mobile navigation #72: Related edits to logoutButton and header component adjustments.
• (SP: 3) [Frontend] Complete About Page redesign: add topics, sponsors, and updated stats #158: Implements or modifies getPlatformStats, which the new API route consumes.

Suggested labels

UI, refactor

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰
I hopped through JSX, light and spry,
Buttons gleam and counters fly.
Menus lock and icons glow,
Stars tally up in a gentle flow.
A tiny hop — the header's high! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly reflects the main changes: a comprehensive refactor of the header UI and navigation state handling across multiple components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 6

🤖 Fix all issues with AI agents

In `@frontend/components/auth/logoutButton.tsx`:
- Around line 59-62: Replace the hardcoded "Log out" string with a translation
lookup: import and use the project's translation hook (e.g.,
useTranslation/useTranslations) inside the LogoutButton component, call the
translation function like t('logOut') or t('common.logOut'), and replace the
visible text inside the <span> and the aria-label on the icon-only variant (the
LogOut icon's aria-label) with that translated value; keep existing classNames
and behavior intact.

In `@frontend/components/header/DesktopActions.tsx`:
- Line 51: The GitHubStarButtonProps defines an unused org prop while the
component hardcodes the GitHub URL; either remove org from GitHubStarButtonProps
and all callers (e.g., in DesktopActions.tsx) or update the GitHubStarButton
implementation (function/component named GitHubStarButton) to accept and
destructure org and use it to build the URL dynamically (for example
constructing `https://github.com/${org}/devlovers.net` or by adding a repo prop
for full flexibility), then replace the hardcoded URL with the constructed one
and update usages accordingly.

In `@frontend/components/header/NavLink.tsx`:
- Around line 15-22: The locale-stripping and active-link logic in the isActive
computation is too permissive; update the cleanPathname and matching so locale
removal only strips full segments (use a regex that matches '/(uk|en|pl)'
followed by '/' or end) and make the href match segment-aware (in the isActive
check inside the block for href !== '/', require either exact equality or that
cleanPathname starts with href + '/' so '/shop' won't match '/shopper'). Locate
and update the variables/functions named isActive, cleanPathname, pathname, and
href to apply the stricter regex and the segment-boundary check.

In `@frontend/components/shared/GitHubStarButton.tsx`:
- Around line 20-34: The parsing assumes data.githubStars is a string and calls
starsStr.includes which can throw if it's null/number; normalize and guard
before parsing by coercing githubStars to a safe string and providing a fallback
(e.g., const starsStr = String(data.githubStars ?? '') or similar) and treat
non-parsable values as 0, then run the existing logic (checking for 'k+' and
parsing) and pass the resulting starsNum into setFinalCount; update the code
that references data.githubStars, starsStr, and setFinalCount in the
GitHubStarButton component to use this guarded normalization.

In `@frontend/components/shared/HeaderButton.tsx`:
- Around line 117-127: The button rendered in HeaderButton (when href is falsy)
lacks an explicit type and may act as a submit button inside forms; update the
JSX for the anonymous button in HeaderButton.tsx to include type="button" on the
<button> element (the element using onClick, className={baseClasses},
aria-label={label}, title={label}, and rendering {content}) so it no longer
defaults to submit.

In `@frontend/components/shop/header/nav-links.tsx`:
- Around line 76-81: The Home link lost its active styling because the
isHomeActive check was removed and HeaderButton no longer receives an active
indicator; restore an active-state calculation and pass it into HeaderButton so
the Home item highlights on Shop pages. Reintroduce a boolean (e.g.,
isHomeActive) in the same component computed from the current route/pathname or
props used elsewhere for nav activation, then pass that boolean into
HeaderButton (e.g., an active or isActive prop or className) for the Home list
item rendered when includeHomeLink is true; update HeaderButton usage to accept
and apply that prop so the Home link shows the active styling.

🧹 Nitpick comments (8)

frontend/app/api/stats/route.ts (1)

4-15: Consider adding Cache-Control headers for HTTP-level caching.

While getPlatformStats uses unstable_cache with a 1-hour revalidation, adding explicit response headers would enable browser/CDN caching and reduce redundant requests.

Suggested improvement

 export async function GET() {
   try {
     const stats = await getPlatformStats();
-    return NextResponse.json(stats);
+    return NextResponse.json(stats, {
+      headers: {
+        'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
+      },
+    });
   } catch (error) {
     console.error('Failed to fetch platform stats:', error);
     return NextResponse.json(
       { error: 'Failed to fetch stats' },
       { status: 500 }
     );
   }
 }

frontend/components/shared/GitHubStarButton.tsx (1)

6-15: Align the public API with actual usage (unused org prop).

The component requires org but never uses it, so callers must pass a value that has no effect. Either remove it or wire it into the GitHub URL.

♻️ Suggested adjustment

-interface GitHubStarButtonProps {
-  org: string;
-  className?: string;
-}
+interface GitHubStarButtonProps {
+  className?: string;
+  repoUrl?: string;
+}
 
-export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
+export function GitHubStarButton({
+  className = '',
+  repoUrl = 'https://github.com/DevLoversTeam/devlovers.net',
+}: GitHubStarButtonProps) {
   const [displayCount, setDisplayCount] = useState(0);
   const [finalCount, setFinalCount] = useState<number | null>(null);
-  const githubUrl = 'https://github.com/DevLoversTeam/devlovers.net';
+  const githubUrl = repoUrl;

frontend/components/header/MainSwitcher.tsx (1)

22-28: Hardcoded locale list may drift from source of truth.

The locale array ['en', 'pl', 'uk'] is duplicated here, but the canonical list is defined in @/i18n/config. If locales are added or removed, this function will become out of sync.

♻️ Suggested fix: Import locales from config

+import { locales } from '@/i18n/config';
+
 function isHomePath(pathname: string): boolean {
   const segments = pathname.split('/').filter(Boolean);
   return (
     segments.length === 0 ||
-    (segments.length === 1 && ['en', 'pl', 'uk'].includes(segments[0]))
+    (segments.length === 1 && locales.includes(segments[0] as typeof locales[number]))
   );
 }

frontend/components/header/DesktopNav.tsx (1)

12-15: Consider importing the Category type from a shared location.

The Category type with _id and title properties is defined locally here but is also used in AppMobileMenu.tsx (as an inline type in props) and likely in blog-related components. Centralizing this type would improve maintainability.

frontend/components/header/AppMobileMenu.tsx (3)

33-45: close function should be wrapped in useCallback.

The close function is used in the useEffect for keyboard handling (line 51), but it's not included in the dependency array. Since close is recreated on every render, this could lead to stale closure issues or ESLint warnings.

♻️ Suggested fix

+import { useEffect, useMemo, useState, useCallback } from 'react';
 
-  const close = () => {
+  const close = useCallback(() => {
     setIsAnimating(false);
     setTimeout(() => setOpen(false), 200);
-  };
+  }, []);
 
-  const toggle = () => {
+  const toggle = useCallback(() => {
     if (open) {
       close();
     } else {
       setOpen(true);
       setTimeout(() => setIsAnimating(true), 10);
     }
-  };
+  }, [open, close]);

---

91-96: Duplicated slugify implementation.

A slugify function already exists in frontend/lib/shop/slug.ts with a more robust implementation (handles Unicode normalization). This local version may produce different results for accented characters.

♻️ Suggested fix

+import { slugify } from '@/lib/shop/slug';
 
-  const slugify = (value: string) =>
-    value
-      .toLowerCase()
-      .trim()
-      .replace(/[^a-z0-9\s-]/g, '')
-      .replace(/\s+/g, '-');

---

236-238: Wrapping LogoutButton in a div with onClick is fragile.

The onClick={close} on the wrapping div will trigger even if the logout action is canceled or fails. Additionally, this pattern doesn't work if the user clicks the button but the event doesn't bubble (e.g., if LogoutButton calls stopPropagation).

♻️ Consider passing onLogout callback to LogoutButton

A cleaner approach would be to extend LogoutButton to accept an onLogout callback:

<LogoutButton onLogout={close} />

This way, the menu closes only after a successful logout action.

frontend/components/header/MobileActions.tsx (1)

8-11: Consider extracting Category type to a shared location.

The Category type is defined here and also appears inline in UnifiedHeader.tsx (as Array<{ _id: string; title: string }>). To maintain consistency and reduce duplication, consider moving this type to a shared types file (e.g., @/types/blog.ts or @/types/shared.ts).

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/components/shared/HeaderButton.tsx`:
- Around line 65-80: The inline style transform on the span (style={{ transform:
'skewX(-20deg)' }}) overrides Tailwind's translate utilities and breaks the
shine animation; remove that inline transform and apply the skew via a Tailwind
class (use an arbitrary value like skew-x-[-20deg]) on the same span so the
translate-x-[-100%], group-hover:translate-x-[100%],
group-active:translate-x-[100%] and transition classes can compose correctly;
keep the background gradient logic that uses isIconOnly unchanged.

🧹 Nitpick comments (1)

frontend/components/shared/HeaderButton.tsx (1)

6-19: Consider requiring label for icon-only variant.

When variant: 'icon' is used without children, the button may lack accessible text. Consider making label required for the icon variant using a discriminated union, or add runtime validation.

💡 Optional: Use discriminated union for type safety

type IconVariantProps = {
  variant: 'icon';
  label: string; // Required for accessibility
  children?: never;
};

type DefaultVariantProps = {
  variant?: 'default';
  label?: string;
  children?: React.ReactNode;
};

type HeaderButtonProps = (IconVariantProps | DefaultVariantProps) & {
  href?: string;
  onClick?: () => void;
  icon?: LucideIcon;
  showArrow?: boolean;
  className?: string;
};

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/components/shared/HeaderButton.tsx`:
- Around line 6-19: The HeaderButton component allows icon-only buttons without
an accessible name; update HeaderButton to derive a label from string children
when present and to enforce a label in development when variant === 'icon' and
there is no label or string children. Specifically, in HeaderButton (props:
label, children, variant), compute effectiveLabel = label ?? (typeof children
=== 'string' ? children : undefined), use effectiveLabel for aria-label and
title, and add a dev-only console.warn if variant === 'icon' and effectiveLabel
is undefined to force developers to provide an accessible label for icon-only
buttons.