feat(ui): implement responsive navbar with animated wallet status with dropdown#105
Merged
Merged
Conversation
Contributor
Author
|
Contributor
Author
|
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
2 participants
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.
Closes #90
PR Description:
This PR completely resolves Issue #90 by upgrading the existing layout into a fully responsive, animated navigation ecosystem. The implementation introduces dynamic Web3 wallet connection status indicators, an interactive user profile dropdown menu, and an optimized mobile hamburger drawer using custom animation states that stay cohesive with the TaskChain design system.
Changes Implemented:
**Desktop View (hidden md:flex): Arranged the main marketing navigation anchors alongside the Web3 actions and utility modules () horizontally.ThemeToggle.
**Mobile View (md:hidden): Replaced default text links with a responsive hamburger button that dynamically toggles between standard and states with a 90-degree rotating transition.MenuX.
**Wallet Connection Toggle: Embedded a rounded-full pill button utilizing state conditional variations (). When connected, it masks a mock public stellar key address () alongside an emerald pulsing status indicator dot.variant={isConnected ? "outline" : "default"}GBXW...4Y2T.
**Animated User Flyout Menu: Added a custom floating dropdown card accessible on avatar interaction. The card manages explicit system routes (, ) and includes a destructive action block to simulate wallet disconnection cleanly./profile/settings.
**Transition Choreography: Handled animation injections directly through Tailwind's native hardware-accelerated utility flags (), guaranteeing a premium native feel without external framer library payloads.animate-in fade-in slide-in-from-top-1 duration-150.
**State Synchronization: Wrote a central memory clearing function () that shuts both the desktop profile dropdown and mobile action drawers simultaneously whenever any link is selected.closeMenus.
**Token Uniformity: Styled all backdrops and borders with existing framework variables (, , ) for full dark/light theme flexibility.bg-background/80border-border/40backdrop-blur-xl.
Acceptance Criteria Checklist:
[x] Wallet Connection Status: Verified that connecting a wallet replaces the call-to-action button with a live wallet address string and an emerald pulse indicator.
[x] User Dropdown Menu: Validated that profile, settings, and logout options render beautifully within an absolute-positioned floating container.
[x] Mobile Hamburger Menu: Verified that links stack vertically and display cleanly on mobile screens.
[x] Animated Transitions: Confirmed that menus fade, slide, and rotate smoothly upon user engagement.
[x] Consistent Styling: Verified pixel-perfect cross-device continuity across light and dark modes.