feat: Add Policies dropdown to navbar with General Policy and Good Practices documents #125
Conversation
👷 Deploy request for kleros-escrow-v2 pending review.Visit the deploys page to approve it
|
WalkthroughRemoves the entire Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Explore as Explore Navbar
participant Policies as Policies Component
participant MobileCtx as MobileHeaderContext
participant Browser as Window/Browser
User->>Policies: Click "Policies" button
Policies->>Policies: Toggle isOpen
alt isOpen
Policies-->>User: Show dropdown
else
Policies-->>User: Hide dropdown
end
User->>Policies: Click a policy item
Policies->>Browser: window.open(policy.url, "_blank")
Policies->>Policies: Close dropdown
opt isMobileNavbar
Policies->>MobileCtx: toggleIsOpen()
end
User->>Browser: Click outside
Browser->>Policies: mousedown event
Policies->>Policies: Detect outside click → Close dropdown
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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. CodeRabbit Commands (Invoked using PR/Issue comments)Type 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
🧹 Nitpick comments (3)
web/src/layout/Header/navbar/Policies.tsx (3)
55-64: Make chevron reflect open/closed stateYou pass isOpen to ChevronIcon but don’t use it. Rotate the caret when open for clearer UI feedback.
- transform: rotate(45deg); + transform: ${({ isOpen }) => (isOpen ? "rotate(-135deg)" : "rotate(45deg)")}; transition: transform 0.2s ease;
81-87: Preserve slide animation in landscapeThe landscapeStyle block overwrites transform, eliminating the slide-in/out animation. Compose translateX with the isOpen-based translateY to keep the animation consistent.
${landscapeStyle( () => css` top: calc(100% + 8px); left: 50%; - transform: translateX(-50%) translateY(0); + transform: ${({ isOpen }) => `translateX(-50%) translateY(${isOpen ? "0" : "-10px"})`}; ` )};
204-216: Improve close behavior: support pointer events and Escape key
- Add pointerdown to reliably detect outside clicks on touch devices.
- Close on Escape for keyboard users.
useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { + const handleClickOutside = (event: Event) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setIsOpen(false); } }; + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === "Escape") setIsOpen(false); + }; - document.addEventListener("mousedown", handleClickOutside); + document.addEventListener("pointerdown", handleClickOutside); + document.addEventListener("mousedown", handleClickOutside); + document.addEventListener("keydown", handleKeyDown); return () => { - document.removeEventListener("mousedown", handleClickOutside); + document.removeEventListener("pointerdown", handleClickOutside); + document.removeEventListener("mousedown", handleClickOutside); + document.removeEventListener("keydown", handleKeyDown); }; }, []);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
web/package.json(1 hunks)web/src/layout/Header/navbar/Explore.tsx(2 hunks)web/src/layout/Header/navbar/Policies.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
web/src/layout/Header/navbar/Policies.tsx (2)
web/src/styles/landscapeStyle.ts (1)
landscapeStyle(7-11)web/src/layout/Header/MobileHeader.tsx (1)
useOpenContext(44-46)
🔇 Additional comments (2)
web/src/layout/Header/navbar/Policies.tsx (1)
30-53: Overall: Solid component structure and stylingNice job on the structured styled-components, theme usage, outside-click handling, and mobile coordination via context. Dimensions and hover treatments look aligned with the spec.
Also applies to: 66-116, 118-176, 189-202, 229-266
web/src/layout/Header/navbar/Explore.tsx (1)
8-8: Integration looks cleanImporting and rendering Policies with isMobileNavbar keeps the Explore layout consistent and leverages the existing mobile header context.
Also applies to: 80-80
🎯 Overview
Implements the Policies dropdown menu in the navbar as requested in #113, providing users with easy access to important policy documents.
✨ Features
Technical Details
Policies.tsxcomponent integrated into navbarUI/UX Improvements
🔗 Document Links
https://cdn.kleros.link/ipfs/QmU2GuwcSs8tFp8gWf5hcXVbcJKRqwoecNnERz9XjKr18dhttps://cdn.kleros.link/ipfs/QmcCyR68RmwWfdVKinY8Fmiy73a6xEzGqYDcvAh9EFUnLF🧪 Testing
📸 Screenshots
🔄 Files Changed
web/src/layout/Header/navbar/Policies.tsx- New Policies componentweb/src/layout/Header/navbar/Explore.tsx- Integrated Policies into navbarPR-Codex overview
This PR introduces a new component,
Policies, to theExploresection of the application. It enhances the user interface by providing a dropdown menu for policy options, improving navigation and accessibility.Detailed summary
Policiescomponent toweb/src/layout/Header/navbar/Policies.tsx.PoliciesintoExplorecomponent inweb/src/layout/Header/navbar/Explore.tsx.Policies.Summary by CodeRabbit
New Features
Chores