Hide the More navbar menu on small screens

[elisescu]

This used to be the case before and it's a regression since the new landing page

Summary by CodeRabbit

• Style

  • More menu hides on small screens and appears on medium+ for cleaner navigation.
  • Mobile menu titles/items use tighter sizing, left alignment and truncation for better readability.
  • Search input width reduced for a more compact header.

• New Features

  • Mobile menu gains a two-column layout for signed-in users, separating main and account links.
  • Header right-side controls consolidated for improved responsive placement and spacing.

• Refactor

  • Navbar link data split into main and account sets to support the new mobile/header layouts.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Header layout adjusted for responsive grouping; right-side controls moved into a dedicated wrapper. Mobile menu now renders separate mainLinks and accountLinks columns when logged in. useNavbarLinks return shape updated to include isLoggedIn and separated mainLinks/accountLinks. Minor styling and breakpoint tweaks applied.

Changes

Cohort / File(s)	Change Summary
Header layout front_end/src/app/(main)/components/headers/header.tsx	Right-side controls (GlobalSearch, create-question link, NavUserButton, MobileMenu) moved into a dedicated right-side wrapper; "More" menu now hidden on small screens and shown from md up.
Mobile menu structure front_end/src/app/(main)/components/headers/components/mobile_menu.tsx	Mobile menu changed from a single-column list to a grid: always renders mainLinks; conditionally renders accountLinks as a second column when isLoggedIn.
Mobile menu item/title styling front_end/src/app/(main)/components/headers/components/mobile_menu_link.tsx, front_end/src/app/(main)/components/headers/components/mobile_menu_title.tsx	Tailwind classes adjusted: items left-aligned, h-fit, text-sm/text-xs, truncation and spacing tweaks affecting layout and alignment.
Navbar links hook front_end/src/app/(main)/components/headers/hooks/useNavbarLinks.tsx	Hook return signature updated to include isLoggedIn and separate mainLinks and accountLinks (previously a single combined links array); callers now receive both buckets.
Global search responsiveness front_end/src/app/(main)/components/global_search.tsx	Visibility breakpoints changed from xl to md and SearchInput min-width reduced from 290px to 220px.
Community mobile menu front_end/src/app/(main)/components/headers/components/community_mobile_menu.tsx	Combines mainLinks and accountLinks into allLinks and iterates over that merged set when rendering mobile community menu items.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 I nibbled classes, neat and quick,
Split menus into two — a clever trick.
Right-side friends grouped snug and tight,
Mobile gains a column when you’re signed in right.
A hop, a tweak, the header feels light.

🚥 Pre-merge checks | ✅ 2

✅ 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 accurately describes the main change: hiding the More navbar menu on small screens, which is directly reflected in the header.tsx modifications adding md:block visibility constraint.

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

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 730cf76 and 3b394ed.

📒 Files selected for processing (7)

• front_end/src/app/(main)/components/global_search.tsx
• front_end/src/app/(main)/components/headers/components/community_mobile_menu.tsx
• front_end/src/app/(main)/components/headers/components/mobile_menu.tsx
• front_end/src/app/(main)/components/headers/components/mobile_menu_link.tsx
• front_end/src/app/(main)/components/headers/components/mobile_menu_title.tsx
• front_end/src/app/(main)/components/headers/header.tsx
• front_end/src/app/(main)/components/headers/hooks/useNavbarLinks.tsx

🚧 Files skipped from review as they are similar to previous changes (3)

• front_end/src/app/(main)/components/headers/components/community_mobile_menu.tsx
• front_end/src/app/(main)/components/headers/components/mobile_menu_link.tsx
• front_end/src/app/(main)/components/global_search.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

front_end/src/app/(main)/components/headers/header.tsx (1)

front_end/src/app/(main)/components/headers/components/mobile_menu.tsx (1)

• MobileMenu (20-164)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Frontend Checks
• GitHub Check: Backend Checks
• GitHub Check: integration-tests
• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (6)

front_end/src/app/(main)/components/headers/components/mobile_menu_title.tsx (1)

9-20: LGTM!

The styling changes appropriately adjust the mobile menu title for the updated layout:

• h-fit with left alignment suits content-sized section headers
• truncate is a good addition to handle potentially long titles gracefully
• Smaller, lighter typography (text-xs font-normal) is reasonable for mobile menu section labels

front_end/src/app/(main)/components/headers/components/mobile_menu.tsx (2)

21-23: Hook usage matches the new return shape.
Clean integration of mobileMenuLinks with mainLinks / accountLinks.

---

89-146: Two-column mobile menu layout looks solid.
Conditional account column renders cleanly and keeps the main links intact.

front_end/src/app/(main)/components/headers/header.tsx (2)

53-82: More menu hidden on small screens as intended.
This restores the previous behavior and keeps desktop UX unchanged.

---

85-113: Right-side wrapper refactor is coherent.
Grouping search, user controls, and mobile menu improves alignment without changing behavior.

front_end/src/app/(main)/components/headers/hooks/useNavbarLinks.tsx (1)

216-320: All useNavbarLinks consumers correctly handle the new return shape.

The verification found 4 call sites:

• community_header.tsx and header.tsx destructure only what they need (navbarLinks, menuLinks, LINKS)
• mobile_menu.tsx and community_mobile_menu.tsx correctly destructure mobileMenuLinks into { mainLinks, accountLinks } and use both parts appropriately

The hook API change has been properly propagated across all consumers.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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