[Aksel.nav.no] Initial App-router setup #3662
Merged
Conversation
This file contains 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
|
There was a problem hiding this comment.
Pull Request Overview
This PR sets up the initial App-router configuration for the Designsystem pages by porting over existing sidebar content, updating header and footer tokens, and integrating with Sanity for live content. Key changes include:
- Implementation of new sidebar, header, and footer components using updated navigation and styling.
- Integration of server-side data fetching and live updates via Sanity.
- Addition of draft mode toggle actions and query definitions for Designsystem content.
Reviewed Changes
Copilot reviewed 27 out of 27 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| aksel.nav.no/website/app/_ui/sidebar/Sidebar.tsx | New Sidebar component using Sanity data and grouping |
| aksel.nav.no/website/app/_ui/header/Header.link.tsx | Header link component migrated to Next.js navigation |
| aksel.nav.no/website/app/_ui/sidebar/Sidebar.item.tsx | Sidebar item component for individual links |
| aksel.nav.no/website/app/_ui/sidebar/Sidebar.subnav.tsx | Sidebar sub-navigation component with toggle state |
| aksel.nav.no/website/app/_ui/sidebar/Sidebar.group.tsx | Sidebar group component integrating items and subnav |
| aksel.nav.no/website/app/_sanity/client.ts | Sanity client configuration |
| aksel.nav.no/website/app/layout.tsx | Global layout with Sanity live integration |
| aksel.nav.no/website/app/dev/(designsystemet)/komponenter/page.tsx | Placeholder page for Designsystem components |
| aksel.nav.no/website/app/dev/(designsystemet)/layout.tsx | Layout for Designsystem dev routes |
| aksel.nav.no/website/app/_ui/sidebar/Sidebar.util.ts | Utility for generating sidebar structure and sorting |
| aksel.nav.no/website/app/_sanity/live.ts | Definition for live updates via Sanity |
| aksel.nav.no/website/app/_ui/footer/Footer.tsx | New Footer component with updated links and icons |
| aksel.nav.no/website/app/_ui/header/Header.tsx | New Header component integrating logo and navigation |
| aksel.nav.no/website/app/actions.ts | Actions for enabling/disabling draft mode |
| aksel.nav.no/website/app/_sanity/queries.ts | Definitions for Sanity queries specific to Designsystem |
Comments suppressed due to low confidence (2)
aksel.nav.no/website/app/_ui/sidebar/Sidebar.tsx:31
- The SidebarGroup component is given a key even though its parent React.Fragment already has the same key, which can lead to duplicate key warnings. Consider removing the redundant key from the SidebarGroup component.
<SidebarGroup key={section.label} label={section.label} links={section.links} layout={layout} />
aksel.nav.no/website/app/_ui/sidebar/Sidebar.util.ts:31
- [nitpick] Chaining multiple sort calls may lead to unexpected ordering because each subsequent sort can override the previous sort. Consider combining the sort logic into a single comparator to ensure the intended order.
.sort((a, b) => a?.heading.localeCompare(b?.heading))
.sort(sortIndex)
.sort(sortDeprecated)
Co-authored-by: Copilot <[email protected]>
JulianNymark
previously approved these changes
Mar 17, 2025
* 🚚 Moved search-code closer to app router * ✨ Added button and modal * ⚡ Initial loading for recent articles * ⚡ Query data from the server * ✨ Generates parsed search-results * ⚡ Added debounce * ✨ Render hits * ♻️ Limit articles for each field to 20 * 🐛 Revert form-layout to initial view * 🐛 Build searchindex before website * ✨ Pre-select text when re-opening search * ✨ Enhance global search UI with improved layout and styling * ✨ Refactor global search components to improve search functionality and UI * ✨ Improve global search functionality and UI responsiveness * ✨ Update global search UI and functionality with improved input handling and styling * ✨ Refactor global search dialog and add Kbd component for keyboard shortcuts * ⚡ removed reduntant suspense * ✨ Refactor global search components for improved styling and functionality * ✨ Refactor global search results rendering for improved performance and readability * ✨ Update global search dialog and form for improved styling and accessibility * ✨ Refactor global search components for improved layout and styling * ✨ Refactor GlobalSearchHitCollection for improved styling and accessibility * 🎨 Update global search configuration and styles for improved clarity and aesthetics * 🎨 Update layout and styles for global search components for improved aesthetics and readability * ✨ Refactor global search utilities and update styles for improved clarity and maintainability * 🔧 Refactor global search queries and implement caching for improved performance and data retrieval * ⚡ Preload cache for search * 🔧 Refactor fetchArticles function to improve caching logic and remove unnecessary logging * 🔥 Removed user server directive from component * 🔥 Removed comments * ⚡ Explicitly declare server-only component * Update aksel.nav.no/website/app/_ui/global-search/GlobalSearch.fetch.ts Co-authored-by: Copilot <[email protected]> * Update aksel.nav.no/website/app/_ui/global-search/GlobalSearch.fetch.ts Co-authored-by: Copilot <[email protected]> * 📝 Rename sanitiezedata --------- Co-authored-by: Copilot <[email protected]>
JulianNymark
previously approved these changes
Mar 18, 2025
* 💄 Added global aksel-theme tokens * ✨ Implement new Aksel-brand for theming
* 💄 Added global aksel-theme tokens * ✨ Implement new Aksel-brand for theming * ✨ Initial setup mobile-menu * ✨ V1 mobile-menu component * 💄 Update mobile navigation and global search responsiveness; adjust overlay color opacity * 💄 Refine modal backdrop animation timing and opacity for smoother transitions
Storybook demo / Chromaticc5c0d3b68 | 91 components | 135 stories |
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.
Description
Started porting over content to the new App-router, focusing on what's needed for the new "Designsystem" pages.
next/navigationnow.All app routes will only be reachable on
/dev/*, so we can iterate on this while not affecting the old pages.Have tried to avoid using tailwind at all to keep things simple.
This is just the start of whats needed to get the app-router up and running, but that will come in future PR-s
As for the
Header, the design isn't 100% finalized, and still need to port over Search and Mobile menu in future PRsComponent Checklist 📝
@navikt/core/css/config/_mappings.js)@navikt/core/css/tokens.json)@navikt/aksel-stylelint/src/deprecations.ts)@navikt/core/react/src/index.tsand@navikt/core/react/package.json)@navikt/core/css/index.css)<Component>: <gitmoji?> <Text>.E.g. "Button: ✨ Add feature xyz.")