Refactor navigation to horizontal top header and improve loading states#61
Merged
Refactor navigation to horizontal top header and improve loading states#61
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request refactors the navigation system from a left sidebar to a horizontal top header layout, reorganizes the application routes using Next.js route groups for better navigation UX, and replaces full-page loading screens with component-level skeletons for improved user experience.
Changes:
- Replaced left sidebar navigation with horizontal top tabs on desktop and hamburger menu on mobile
- Created a (dashboard) route group to consolidate all dashboard pages under a single layout
- Replaced full-page LoadingScreen with TransactionDetailSkeleton for more granular loading states
Reviewed changes
Copilot reviewed 18 out of 21 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/layouts/dashboard/layout.tsx | Complete rewrite to use horizontal AppBar with centered navigation tabs and fixed-width left/right sections |
| src/layouts/components/nav-tabs.tsx | New component providing horizontal navigation tabs for desktop and collapsible menu for mobile |
| src/layouts/components/filter-popover.tsx | New component consolidating time period and token filters into a popover accessible from the header |
| src/layouts/dashboard/main.tsx | Removed Main component, kept only DashboardContent with simplified padding logic |
| src/components/logo/logo.tsx | Simplified Logo component with new 'single' prop replacing 'isLarge' and 'isSingle' props |
| src/components/skeletons/transaction-detail-skeleton.tsx | New skeleton component for transaction detail page loading state |
| src/components/loading-screen/loading-screen.tsx | Removed full-page loading screen component |
| src/app/(dashboard)/layout.tsx | New layout file for the dashboard route group |
| src/app/(dashboard)/page.tsx | Moved from src/app/page.tsx to dashboard route group |
| src/app/(dashboard)/transactions/page.tsx | New transactions page within dashboard route group |
| src/app/(dashboard)/transactions/[tx]/page.tsx | New transaction detail page within dashboard route group |
| src/app/(dashboard)/profile/page.tsx | New profile page within dashboard route group |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 21 out of 23 changed files in this pull request and generated 2 comments.
Comments suppressed due to low confidence (1)
src/app/(dashboard)/layout.tsx:10
- The profile page previously had
disableTimelines={true}in its dedicated layout, which would hide the FilterPopover (time/token filters) on the profile page. After this refactor, all pages in the (dashboard) route group share the same layout without this configuration. This means the FilterPopover will now appear on the profile page, which may not be the intended behavior since profile pages typically don't need time period or token filters.
Consider either:
- Adding a mechanism to conditionally hide the FilterPopover on specific routes (e.g., checking pathname in DashboardLayout)
- Moving the profile page outside the (dashboard) route group with its own layout
- Accepting this change if filters on the profile page are acceptable
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ngScreen component
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.
Summary
Changes
Navigation Refactor
Route Structure
Loading States
Page Titles & Metadata
Testing