[v4] simplify the class-name of the sidebar file item #3444
Conversation
🦋 Changeset detectedLatest commit: ddab631 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
|
@87xie is attempting to deploy a commit to the Vercel Team on Vercel. A member of the Team first needs to authorize it. |
| border: cn( | ||
| '_relative before:_absolute before:_inset-y-1', | ||
| 'before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800', | ||
| '_ps-3 before:_start-0' | ||
| '_ps-3 before:_start-0 _pt-1 _ms-3' |
There was a problem hiding this comment.
instead of your _mt-1, let's use _pt-1 which we already used here
| if (isLink) { | ||
| // If it's focused, we toggle it. Otherwise, always open it. | ||
| if (active || clickedToggleIcon) { | ||
| TreeState[item.route] = !open | ||
| } else { | ||
| TreeState[item.route] = true | ||
| } | ||
| rerender({}) | ||
| return | ||
| } | ||
| if (active) return | ||
| TreeState[item.route] = !open | ||
| // If it's focused, we toggle it. Otherwise, always open it. | ||
| TreeState[item.route] = active || clickedToggleIcon ? !open : true |
There was a problem hiding this comment.
this fix bug when <button> can't be closed 😅 (we have similar issue in v3 btw)
Screen.Recording.2024-10-14.at.17.29.36.mov
| // Add inner <div> only if children.length != 1 | ||
| const newChildren = useMemo( | ||
| () => (Children.count(children) === 1 ? children : <div>{children}</div>), | ||
| [children] | ||
| ) |
There was a problem hiding this comment.
this to use for 1 inner div less in (div in screenshot will be removed)
and
There was a problem hiding this comment.
hm, I guess it produces Uncaught Error: Minified React error #425 🧐
There was a problem hiding this comment.
https://react.dev/errors/425 Text content does not match server-rendered HTML. 🧐
|
Thanks for the update! |
|
Additionally, I’d like to ask if it’s preferable to place the condition for anchors inside useMemo in export function Sidebar({ toc }: { toc: Heading[] }): ReactElement {
const themeConfig = useThemeConfig()
const anchors = useMemo(() => (
return themeConfig.toc.float ? [] : toc.filter(v => v.depth === 2)
), [themeConfig.toc.float, toc])
// ...
}This change doesn’t bring any significant benefit, but it might help avoid missing the ternary operator in the JSX when searching for anchors. |
lgtm, you can add this change in some of your future contributions 👍 |
Why:
Closes: N/A
This PR aims to simplify the class name of the sidebar file item. Since the file item only needs
_flex _flex-col _gap-1whenactive && props.anchors.length > 0, I added_mt-1to the anchor list to achieve the same effect.What's being changed (if available, include any code snippets, screenshots, or gifs):
sidebar
mobile nav
Check off the following:
deployment link in this PR's timeline (this link will be available after
opening the PR).