addded search icon in in header#45
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe navbar component gains a separate mobile search drawer state, independent from the mobile menu toggle. New mobile action buttons open one drawer while closing the other. Mobile search results now display name and full name on one line with status below, and the mobile menu block is repositioned after the search drawer. ChangesMobile Search Drawer
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant MobileActions
participant SearchDrawer
participant MobileMenu
User->>MobileActions: tap search icon
MobileActions->>SearchDrawer: open (isMobileSearchOpen=true)
MobileActions->>MobileMenu: close (isOpen=false)
User->>SearchDrawer: type query
SearchDrawer->>SearchDrawer: filter universities
User->>SearchDrawer: select result
SearchDrawer->>User: navigate / show toast
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
🎉 Congratulations @nitinmohan18!Thank you for contributing to HyperLearningTech. Your pull request has been successfully merged into main. 📦 Merge Summary
🚀 Keep Contributing
Thank you for helping make HyperLearningTech better. Happy Coding! 🚀 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/navbar.tsx (1)
108-126: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winEnter key won't close the mobile search drawer.
handleSearchKeyDownis reused for both the desktop bar and the new mobile drawer input (Line 469), but on Enter it only callssetIsOpen(false)(menu state) — it never touchesisMobileSearchOpen. Since the mobile drawer opens by settingisOpentofalsealready (Line 421), this call is a no-op for the mobile drawer, leaving it open after submitting a search via Enter.🐛 Proposed fix
const handleSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter") { const element = document.getElementById("Universities"); if (element) { element.scrollIntoView({ behavior: "smooth", block: "start" }); } else { router.push("/#Universities"); } setIsOpen(false); + setIsMobileSearchOpen(false); } };Also applies to: 463-471
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/navbar.tsx` around lines 108 - 126, The Enter key handler in handleSearchKeyDown only closes the desktop menu state, so it does not dismiss the mobile search drawer when the same handler is used there. Update handleSearchKeyDown to also close the mobile search state used by the drawer (isMobileSearchOpen) when Enter is pressed, while keeping the existing scroll/navigation behavior intact. Make sure the mobile input path that reuses this handler is covered so submitting a search via Enter always closes the drawer.
🧹 Nitpick comments (2)
components/navbar.tsx (2)
450-537: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy liftMobile dropdown duplicates the desktop dropdown almost verbatim.
The mobile search drawer's dropdown (Lines 473-533) reimplements the same filtering, selection handler, and result-item markup as the desktop dropdown (Lines 266-324), differing only in styling/animation. Consider extracting a shared
SearchResultsDropdowncomponent that both the desktop and mobile drawers render, to avoid the two copies drifting apart over time.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/navbar.tsx` around lines 450 - 537, The mobile search dropdown duplicates the desktop search results logic and markup, which will drift over time. Extract the shared filtering/selection UI into a reusable SearchResultsDropdown component (or equivalent) and have both the desktop search and the mobile search drawer render it with their respective styling/animation wrappers. Keep the existing behavior in navbar.tsx by reusing the same handlers and result item rendering via unique symbols like handleSearchChange, handleSearchKeyDown, filteredUniversities, and the university click action.
417-427: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMobile search toggle missing
aria-expanded/aria-controls.The menu toggle (Lines 435-437) exposes
aria-expandedandaria-controls, but the new search toggle button only hasaria-label. Add the equivalent attributes (and anidon the search drawer) for consistent screen-reader affordance.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/navbar.tsx` around lines 417 - 427, The mobile search toggle in the navbar button is missing the same accessible state wiring used by the menu toggle. Update the Search button in the mobile navbar controls to expose aria-expanded and aria-controls, and add a matching id to the search drawer/panel that it opens so screen readers can associate the control with the content.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/navbar.tsx`:
- Around line 418-427: The mobile search toggle in the navbar does not fully
reset search state when closing, so the Universities section can remain filtered
after the drawer disappears. Update the button handler in `navbar.tsx` to clear
`searchQuery` and dispatch the same `university-search` event with `detail: ""`
when `isMobileSearchOpen` is turned off, matching the cleanup used after result
selection. Keep the existing `setIsMobileSearchOpen` and `setIsOpen` behavior,
but ensure the close path resets all mobile search state.
---
Outside diff comments:
In `@components/navbar.tsx`:
- Around line 108-126: The Enter key handler in handleSearchKeyDown only closes
the desktop menu state, so it does not dismiss the mobile search drawer when the
same handler is used there. Update handleSearchKeyDown to also close the mobile
search state used by the drawer (isMobileSearchOpen) when Enter is pressed,
while keeping the existing scroll/navigation behavior intact. Make sure the
mobile input path that reuses this handler is covered so submitting a search via
Enter always closes the drawer.
---
Nitpick comments:
In `@components/navbar.tsx`:
- Around line 450-537: The mobile search dropdown duplicates the desktop search
results logic and markup, which will drift over time. Extract the shared
filtering/selection UI into a reusable SearchResultsDropdown component (or
equivalent) and have both the desktop search and the mobile search drawer render
it with their respective styling/animation wrappers. Keep the existing behavior
in navbar.tsx by reusing the same handlers and result item rendering via unique
symbols like handleSearchChange, handleSearchKeyDown, filteredUniversities, and
the university click action.
- Around line 417-427: The mobile search toggle in the navbar button is missing
the same accessible state wiring used by the menu toggle. Update the Search
button in the mobile navbar controls to expose aria-expanded and aria-controls,
and add a matching id to the search drawer/panel that it opens so screen readers
can associate the control with the content.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
| <button | ||
| onClick={() => { | ||
| setIsMobileSearchOpen(!isMobileSearchOpen); | ||
| setIsOpen(false); // Close menu if search is opened | ||
| }} | ||
| aria-label="Toggle mobile search" | ||
| className="rounded-xl p-2 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50" | ||
| > | ||
| <Search className="h-5 w-5" /> | ||
| </button> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the relevant component and locate search state/event dispatch logic.
git ls-files 'components/navbar.tsx'
ast-grep outline components/navbar.tsx --view expanded || true
rg -n "searchQuery|university-search|setIsMobileSearchOpen|setIsOpen|dispatchEvent|CustomEvent|search" components/navbar.tsx
sed -n '360,520p' components/navbar.tsxRepository: imuniqueshiv/HyperLearningTech
Length of output: 10202
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '95,145p' components/navbar.tsx
printf '\n----\n'
sed -n '240,305p' components/navbar.tsxRepository: imuniqueshiv/HyperLearningTech
Length of output: 5251
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n "university-search|addEventListener\\(" .Repository: imuniqueshiv/HyperLearningTech
Length of output: 932
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,120p' features/landing/universities.tsxRepository: imuniqueshiv/HyperLearningTech
Length of output: 5469
Clear the mobile search state when the toggle closes the drawer. Closing isMobileSearchOpen leaves searchQuery and the last "university-search" event in place, so the Universities section can stay filtered after the drawer disappears. Reset searchQuery and dispatch detail: "" on close, matching the result-selection cleanup.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/navbar.tsx` around lines 418 - 427, The mobile search toggle in
the navbar does not fully reset search state when closing, so the Universities
section can remain filtered after the drawer disappears. Update the button
handler in `navbar.tsx` to clear `searchQuery` and dispatch the same
`university-search` event with `detail: ""` when `isMobileSearchOpen` is turned
off, matching the cleanup used after result selection. Keep the existing
`setIsMobileSearchOpen` and `setIsOpen` behavior, but ensure the close path
resets all mobile search state.
1 participant
Pull Request
Summary
Refined the Footer layout for a more premium, minimalist aesthetic and completely overhauled the Mobile Navbar Search experience for better usability and cleaner UI.
Related Issue
Closes #
Type of Change
What Changed?
Screenshots (UI Changes Only)
Testing
Verified the mobile search toggle and dropdown expansion across different screen sizes to ensure animations run smoothly without clipping. Confirmed the mobile menu auto-closes when the search drawer is opened and vice-versa. Validated the typography and layout changes in the footer across desktop and mobile breakpoints.
Checklist
main.npx prettier --write <file>).npm run format:checkpasses.npm run lintpasses.npm run typecheckpasses.npm run buildpasses.Summary by CodeRabbit
New Features
Enhancements