Feat navigation menu #203
Feat navigation menu #203
Conversation
|
@BIT-zhaoyang is attempting to deploy a commit to the OrcDev Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis update introduces an 8-bit styled navigation menu component and its documentation. It adds new UI components, a demo, registry entries, documentation, and configuration for navigation and package dependencies. The changes include both the base and retro-styled navigation menu implementations, as well as supporting assets and metadata. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DocsPage
participant NavigationMenuDemo
participant 8bitNavigationMenu
User->>DocsPage: Visits navigation menu docs page
DocsPage->>NavigationMenuDemo: Renders demo section
NavigationMenuDemo->>8bitNavigationMenu: Renders 8-bit menu with items
User->>8bitNavigationMenu: Interacts (open, select, navigate)
8bitNavigationMenu-->>User: Updates UI, navigates as needed
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
app/docs/components/navigation-menu/page.tsxOops! Something went wrong! :( ESLint: 9.27.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.27.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. components/examples/navigation-menu.tsxOops! Something went wrong! :( ESLint: 9.27.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.27.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. components/ui/8bit/navigation-menu.tsxOops! Something went wrong! :( ESLint: 9.27.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.27.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting.
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧠 Learnings (2)components/ui/8bit/navigation-menu.tsx (3)public/r/8bit-navigation-menu.json (2)🧬 Code Graph Analysis (2)components/examples/navigation-menu.tsx (1)
components/ui/8bit/navigation-menu.tsx (3)
🔇 Additional comments (11)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
registry.json (1)
328-341:⚠️ Potential issueRemove duplicate tooltip component entry.
There's a duplicate entry for the "8bit-tooltip" component (first occurrence at lines 314-327). This duplication could cause registry conflicts and should be removed.
- { - "name": "8bit-tooltip", - "type": "registry:component", - "title": "8-bit Tooltip", - "description": "A simple 8-bit tooltip component", - "registryDependencies": ["tooltip"], - "files": [ - { - "path": "components/ui/8bit/tooltip.tsx", - "type": "registry:component", - "target": "components/ui/8bit/tooltip.tsx" - } - ] - },
🧹 Nitpick comments (4)
config/nav-items.ts (1)
98-101: Navigation configuration correctly implemented.The new "Navigation Menu" item follows the established pattern and will be properly sorted alphabetically. Consider adding
new: trueif this component should be marked as new, similar to other recently added components.If this is a new component, consider adding the new flag:
{ title: "Navigation Menu", url: "/docs/components/navigation-menu", + new: true, },public/r/8bit-navigation-menu.json (1)
1-18: Registry structure looks good, but consider the maintenance implications of embedded code.The registry file correctly follows the schema and properly declares the dependency on "navigation-menu". However, embedding the entire TypeScript component code as a string in line 13 makes it difficult to maintain, test with TypeScript compiler, and get IDE support.
Consider whether the component code could be stored as a separate file and referenced, rather than embedded as a string. This would improve maintainability and enable proper tooling support.
components/ui/navigation-menu.tsx (2)
76-76: Consider using CSS margin instead of a space character for layout.The space character after
{children}could be replaced with CSS margin on the icon for more maintainable spacing.- {children}{" "} + {children} <ChevronDownIcon - className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180" + className="relative top-[1px] ml-1.5 size-3 transition duration-300 group-data-[state=open]:rotate-180"
92-95: Extract complex animation classes for better maintainability.The className string is very complex and difficult to read. Consider extracting the animation and viewport-specific classes into separate variables or using a utility function to compose them.
+const contentAnimationClasses = "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52" + +const viewportFalseClasses = "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none" function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) { return ( <NavigationMenuPrimitive.Content data-slot="navigation-menu-content" className={cn( - "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto", - "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none", + contentAnimationClasses, + "top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto", + viewportFalseClasses, className )} {...props} /> ) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
app/docs/components/navigation-menu/demo.tsx(1 hunks)app/docs/components/navigation-menu/page.tsx(1 hunks)app/globals.css(3 hunks)components/ui/8bit/navigation-menu.tsx(1 hunks)components/ui/navigation-menu.tsx(1 hunks)config/nav-items.ts(1 hunks)package.json(1 hunks)public/r/8bit-navigation-menu.json(1 hunks)registry.json(1 hunks)
🔇 Additional comments (9)
registry.json (1)
773-786: LGTM! The navigation menu component registration follows proper conventions.The new
8bit-navigation-menuentry is correctly structured with proper dependencies and file paths.app/globals.css (3)
79-79: Good implementation of theme-aware CSS custom property.The
--shadow-borderproperty correctly usesvar(--foreground)for the light theme, ensuring consistency with the design system.
114-114: Appropriate dark theme variation.The dark theme uses
var(--ring)for the shadow border, which provides good contrast and visual distinction from the light theme.
126-132: Excellent 8-bit styling implementation.The
.shadow-borderclass creates a multi-directional pixelated border effect that perfectly aligns with the project's 8-bit aesthetic. The use of CSS custom properties makes it theme-aware and maintainable.app/docs/components/navigation-menu/demo.tsx (2)
55-118: Well-structured navigation menu demo implementation!The component properly demonstrates the navigation menu with dropdown content, grid layouts, and responsive design. Good use of semantic HTML and accessibility considerations.
120-138: Clean helper component implementation!Good use of TypeScript for type safety and proper forwarding of props.
app/docs/components/navigation-menu/page.tsx (1)
20-87: Well-structured documentation page!Good organization with clear sections for demo, installation, and usage. Proper use of environment variables for dynamic URLs.
components/ui/8bit/navigation-menu.tsx (2)
1-200: Excellent implementation of the 8-bit styled navigation menu!The component architecture is well-designed with:
- Clean separation of concerns using wrapper components
- Consistent font variant implementation across all components
- Proper TypeScript typing and prop forwarding
- Good use of Radix UI primitives for accessibility
The retro font styling with Press_Start_2P adds a nice 8-bit aesthetic while maintaining functionality.
132-155:✅ Verification successful
Verify the shadow-border class is properly defined.
The component uses the
shadow-borderclass. Based on the PR changes, this should be defined inglobals.css.Run the following script to verify the shadow-border class definition:
🏁 Script executed:
#!/bin/bash # Description: Verify that the shadow-border class is defined in the CSS files # Search for shadow-border class definition rg -A 5 "\.shadow-border" --type cssLength of output: 303
Confirm
.shadow-borderClass Definition
- Verified presence of the
.shadow-borderrule inapp/globals.css(defines the expected box-shadow).- No further changes needed—implementation is correct.
fix code rabbit ai comments
BIT-zhaoyang
force-pushed
the
feat-navigation-menu
branch
2 times, most recently
from
0ef6262 to
346c278
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
app/docs/components/navigation-menu/demo.tsx (1)
37-39: Fix the incorrect description for the Scroll-area component.The description "Visually or semantically separates content" doesn't match what a scroll area component does. This description is more appropriate for a separator component.
🧹 Nitpick comments (1)
components/ui/8bit/navigation-menu.tsx (1)
19-22: Consider reusing existing font configuration.The Press Start 2P font configuration appears to be duplicated. Based on the relevant code snippets, there's already a
pressStartexport inconfig/fonts.ts. Consider importing from there instead of redefining it.Apply this diff to reuse the existing font configuration:
-import { Press_Start_2P } from "next/font/google" +import { pressStart } from "@/config/fonts"-const pressStart = Press_Start_2P({ - weight: ["400"], - subsets: ["latin"], -})
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
app/docs/components/navigation-menu/demo.tsx(1 hunks)app/docs/components/navigation-menu/page.tsx(1 hunks)app/globals.css(3 hunks)components/ui/8bit/navigation-menu.tsx(1 hunks)package.json(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- package.json
- app/globals.css
🚧 Files skipped from review as they are similar to previous changes (1)
- app/docs/components/navigation-menu/page.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
app/docs/components/navigation-menu/demo.tsx (2)
components/ui/8bit/navigation-menu.tsx (8)
NavigationMenu(192-192)NavigationMenuList(197-197)NavigationMenuItem(195-195)NavigationMenuTrigger(198-198)NavigationMenuContent(193-193)NavigationMenuLink(196-196)navigationMenuTriggerStyle(17-17)NavigationMenuIndicator(194-194)components/ui/navigation-menu.tsx (8)
NavigationMenu(159-159)NavigationMenuList(160-160)NavigationMenuItem(161-161)NavigationMenuTrigger(163-163)NavigationMenuContent(162-162)NavigationMenuLink(164-164)navigationMenuTriggerStyle(167-167)NavigationMenuIndicator(165-165)
components/ui/8bit/navigation-menu.tsx (3)
config/fonts.ts (1)
pressStart(3-6)components/ui/navigation-menu.tsx (8)
NavigationMenu(159-159)NavigationMenuViewport(166-166)NavigationMenuList(160-160)NavigationMenuItem(161-161)NavigationMenuTrigger(163-163)NavigationMenuContent(162-162)NavigationMenuLink(164-164)NavigationMenuIndicator(165-165)lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (6)
app/docs/components/navigation-menu/demo.tsx (2)
120-138: Well-implemented helper component.The ListItem component demonstrates good practices:
- Proper TypeScript typing with intersection types
- Correct use of asChild pattern for accessibility
- Good semantic HTML structure
- Appropriate text truncation with line-clamp-2
84-86: Verify the Typography link destination and description.The "Typography" link points to "/blocks" with description "Building Retro Blocks for the Web". This seems like a potential mismatch - verify that this is the intended destination for typography documentation.
components/ui/8bit/navigation-menu.tsx (4)
24-42: Well-structured variant system.The CVA variant setup is clean and properly typed:
- Clear variant names with sensible defaults
- Comprehensive TypeScript interfaces
- Good separation of concerns
44-68: Excellent root component implementation.Good practices demonstrated:
- Proper Radix UI primitive wrapping
- Flexible viewport rendering option
- Conditional font class application
- Clean prop forwarding and class merging
70-189: Consistent and well-implemented component wrappers.All component wrappers follow excellent patterns:
- Consistent font variant application
- Proper TypeScript typing
- Clean prop forwarding
- Special handling for viewport positioning and indicator styling
The implementation maintains consistency while allowing for component-specific customizations where needed.
191-200: Clean and comprehensive exports.All components are properly exported with clear, consistent naming.
- create better, more consistent border behavior - fix broken links in demo
BIT-zhaoyang
force-pushed
the
feat-navigation-menu
branch
from
346c278 to
4d4536f
Compare
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
components/ui/8bit/navigation-menu.tsx (1)
19-34: Consider improving the variant system design.The font variant implementation is functional but could be more efficient and user-friendly:
- The default variant is "retro" which might be unexpected for users
- The font loading could be optimized by making it conditional
Consider this approach for better performance and UX:
-const pressStart = Press_Start_2P({ - weight: ["400"], - subsets: ["latin"], -}) +const pressStart = Press_Start_2P({ + weight: ["400"], + subsets: ["latin"], + display: "swap", // Better font loading performance +}) export const navigationMenuVariants = cva("", { variants: { font: { normal: "", retro: pressStart.className, }, }, defaultVariants: { - font: "retro", + font: "normal", // More intuitive default }, })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
app/docs/components/navigation-menu/demo.tsx(1 hunks)app/docs/components/navigation-menu/page.tsx(1 hunks)app/globals.css(3 hunks)components/ui/8bit/navigation-menu.tsx(1 hunks)package.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- package.json
- app/globals.css
- app/docs/components/navigation-menu/demo.tsx
- app/docs/components/navigation-menu/page.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
components/ui/8bit/navigation-menu.tsx (3)
config/fonts.ts (1)
pressStart(3-6)components/ui/navigation-menu.tsx (8)
NavigationMenu(159-159)NavigationMenuViewport(166-166)NavigationMenuList(160-160)NavigationMenuItem(161-161)NavigationMenuTrigger(163-163)NavigationMenuContent(162-162)NavigationMenuLink(164-164)NavigationMenuIndicator(165-165)lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (1)
components/ui/8bit/navigation-menu.tsx (1)
1-17: LGTM! Clean imports and re-export.The imports are well-organized and the re-export of
navigationMenuTriggerStylemaintains API consistency with the base component.
fix code rabbit ai comments
TheOrcDev
left a comment
TheOrcDev
left a comment
There was a problem hiding this comment.
When we fix these minor things we can merge! Thanks!
There was a problem hiding this comment.
remove all changes on the globals.css
There was a problem hiding this comment.
move this file to the example directory
| title: "8-bit Navigation Menu", | ||
| description: "Displays an 8-bit navigation menu component.", | ||
| openGraph: { | ||
| images: labelMetaData, |
There was a problem hiding this comment.
create a screenshot and add navigationMetaData
- Address review comment
- update registry file
TheOrcDev
left a comment
TheOrcDev
left a comment
There was a problem hiding this comment.
Looking great! Merging! Thank youuuu
* feat: navigation menu * feat: navigation menu fix code rabbit ai comments * feat: navigation menu - create better, more consistent border behavior - fix broken links in demo * feat: navigation menu fix code rabbit ai comments * feat: navigation menu - Address review comment * feat: navigation menu - update registry file
* added syntax highlight * Feat/drawer (#195) * setting up 8bit version of the drawer component, setting up the template for the drawer page and example from shadcn * made drawer component for content, trigger, footer and header into 8bit pixel style * added example of drawer component, metadata graph image and ran registry build * fix issue with dark mode button border not yellow * reran registry build * rewrite content component to make use of vaul primitive drawer content and modify drawer handle * reran registry build * remove top side for drawer content * reran registry build * refactor: update drawer and sheet components styling and positioning * feat(drawer) change example code --------- Co-authored-by: OrcDev <urosmiric88@gmail.com> * chore: add GitHub Sponsors funding configuration file (#197) * docs: add GitHub sponsor badge to README (#198) * refactor: update React.ElementRef to React.ComponentRef in UI components for better type safety (#199) * Feat/toast (#200) * feat(registry) add toast * refactor(toast) change to 8-bit toast * feat(installation-commands) replace sonner with 8-bit toast (#201) * chore: latest dependencies (#202) * Feat navigation menu (#203) * feat: navigation menu * feat: navigation menu fix code rabbit ai comments * feat: navigation menu - create better, more consistent border behavior - fix broken links in demo * feat: navigation menu fix code rabbit ai comments * feat: navigation menu - Address review comment * feat: navigation menu - update registry file * feat(nav-items) add new tag to navigation menu (#204) * Feat/themes (#205) * feat(app) add themes page * feat(themes) add all retro themes * feat: add theme copy dialog and refactor theme management with TypeScript enums * style: update calendar sizing, code snippet layout and theme selector text colors * style: update theme selector UI and adjust accent color values across themes * style: adjust accent and muted color values in dark and light themes * feat(themes) add metadata (#206) * chore: add semicolons and consistent formatting across components (#207) * chore: latest dependencies (#208) * feat(button) add local font for react support (#209) * refactor: replace custom font with Google Fonts for Press Start 2P (#210) * refactor: move retro font to external CSS and simplify button styling (#211) * refactor(app) make all components work on react (#212) * style: add type prefix to VariantProps imports across components (#213) * refactor: remove new badges from nav items (#214) * refactor: remove new badge from mobile navigation items (#215) * fix: adjust YAxis width from 45 to 46 pixels in chart component (#216) * feat(registry) add bar chart component (#217) * feat: add authentication and charts blocks pages with example components (#218) * added syntax highlight * Removed unused code * re added Max height control --------- Co-authored-by: Elias Tran <trandinhphuc1997@gmail.com> Co-authored-by: OrcDev <urosmiric88@gmail.com> Co-authored-by: YangZhao <bit.zhaoyang512@gmail.com>
2 participants
added navigation menu component
Light Mode
Dark Mode
Summary by CodeRabbit
New Features
Chores