Implement responsive sidebar and mobile drawer for DeskLayout#14
Open
16navigabraham wants to merge 3 commits into
Open
Implement responsive sidebar and mobile drawer for DeskLayout#1416navigabraham wants to merge 3 commits into
16navigabraham wants to merge 3 commits into
Conversation
|
@16navigabraham is attempting to deploy a commit to the theweb3nova-2704's projects Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
Enhances the DeskLayout shell to support responsive navigation: a persistent sidebar on desktop and a slide-in drawer with a top bar on mobile, improving navigation usability across screen sizes.
Changes:
- Extracted navigation UI into a reusable
Sidebarcomponent. - Added a mobile drawer (overlay + slide-in panel) controlled by
drawerOpen. - Added a mobile top bar with a menu button and adjusted main content padding/title visibility for responsive layouts.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+145
to
+147
| <div className={`fixed inset-y-0 left-0 z-50 w-64 border-r border-zinc-900 flex flex-col transform transition-transform duration-200 md:hidden ${drawerOpen ? "translate-x-0" : "-translate-x-full"}`}> | ||
| <Sidebar {...sidebarProps} onClose={() => setDrawerOpen(false)} /> | ||
| </div> |
Comment on lines
+22
to
+23
| <button onClick={onClose} className="text-zinc-400 hover:text-white md:hidden"> | ||
| <X size={18} /> |
|
|
||
| {/* Mobile top bar */} | ||
| <header className="md:hidden flex items-center gap-3 px-4 py-3 border-b border-zinc-900 bg-zinc-950"> | ||
| <button onClick={() => setDrawerOpen(true)} className="text-zinc-400 hover:text-white"> |
…perience and passkey creation flow
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Enhance the DeskLayout component with a responsive sidebar for desktop and a mobile drawer for better navigation on smaller screens. This update improves user experience by allowing seamless access to navigation links and actions across different device sizes.