Skip to content

Fixed the Navbar Functionality#1296

Open
Shayan-Bhowmik wants to merge 1 commit into
aryandas2911:mainfrom
Shayan-Bhowmik:navbar-functionality
Open

Fixed the Navbar Functionality#1296
Shayan-Bhowmik wants to merge 1 commit into
aryandas2911:mainfrom
Shayan-Bhowmik:navbar-functionality

Conversation

@Shayan-Bhowmik
Copy link
Copy Markdown

📌 Description

Briefly explain the changes made.

🔗 Related Issue

Closes #1150

🛠 Changes Made

  • Fixed the navbar so it shrinks and expands smoothly instead of collapsing at smaller screen widths.
  • Added responsive sizing for the navbar brand and layout to keep spacing stable.
  • Added a mobile menu toggle and aligned the dropdown breakpoint with the new responsive behavior.

📸 Screenshots (if applicable)

Add screenshots or GIFs to explain UI changes.

✅ Checklist

  • Code runs locally
  • Followed project structure
  • No console errors
  • Properly tested changes
  • Linked the issue

🚀 Notes for Reviewers

Please check the navbar behavior at narrow widths and confirm the mobile toggle/dropdown interaction feels smooth.

Copilot AI review requested due to automatic review settings May 29, 2026 15:04
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adjusts the Navbar layout to prevent overflow and improve responsiveness on medium-sized screens by moving the desktop nav breakpoint from md to lg and adding a dedicated mobile controls cluster (theme toggle + menu button).

Changes:

  • Switched desktop navigation/auth visibility from md: to lg: breakpoint.
  • Added a mobile controls section (dark mode toggle + menu button) visible below lg.
  • Refined logo sizing/wrapping with clamp() typography and shrink-0/min-w-0 utilities to avoid layout breakage.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +342 to +344
>
{isOpen ? <X size={20} /> : <Menu size={20} />}
</motion.button>
Comment on lines +318 to +326
{/* Mobile controls */}
<div className="flex lg:hidden items-center gap-2 shrink-0">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={handleThemeToggle}
className="p-2 rounded-xl border border-soft text-main hover:bg-[#d0f6e3]/30 dark:hover:bg-slate-800 transition-colors focus:outline-none cursor-pointer flex items-center justify-center"
aria-label="Toggle dark mode"
>
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<div className="flex items-center justify-between gap-3 sm:gap-4 h-16 md:h-18 flex-nowrap">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG]: Non Functional Navbar when decreasing the webpage size

2 participants