Comments (6)
Per documentation, in your theme.config
export default {
sidebar: {
titleComponent({ title, type }) {
// your condition
if (title=== 'useAbortController') {
return (
// customize it here
<div style={{ display: 'flex' }}>
<div style={{ marginRight: '5px' }}>{title}</div>
<div style={{ backgroundColor: 'yellow' }}>(New)</div>
</div>
)
}
return <>{title}</>
}
}
}
from nextra.
looking great!
from nextra.
Thank you @arno-fukuda , I'll try it this evening.
from nextra.
Hi @arno-fukuda , yes it works as expected, thank you.
from nextra.
Hi @arno-fukuda , I reopened the issue because I could not find a way to change the width
of the sidebar. See the sidebar item behavior below:
d6beb1a7-dd42-45f9-97b9-696fd04feb31.webm
from nextra.
Thank you @arno-fukuda , I solved the issue:
titleComponent({ title, type }) {
return (
<div className="flex items-center justify-between relative w-full">
<div >{title}</div>
{title === "useAbortController" && (
<Badge className=" absolute -right-[0.5em] bg-transparent border-lime-500 text-lime-500 px-[0.5em]">
New
</Badge>
)}
</div>
);
},
from nextra.
Related Issues (20)
- v3 back-to-top button does not scroll all the way to top
- Defaults Meta Tags Doesn't Get Removed on Nextra.js HOT 6
- Sidebar hidden in production only HOT 6
- “Bleed” is bleeding on larger screen sizes HOT 4
- Limited customization options for Docs theme components. HOT 1
- Search display result inside tab but when clicking on the search result, the page doesn't select the correct tab
- changing the name of files or updating order of files in _meta.json is not reflected in production build HOT 1
- Feedback for “Importing Video / Audio into TimeBolt” HOT 1
- How to change the color of banner component HOT 2
- How to switch the theme from the header? HOT 2
- [v3] Not working sidebar and toc HOT 3
- Feedback for “Hire Us” HOT 1
- Unable to edit the title of the webpage HOT 1
- [v3] Details now requires a specific div for the content
- Components styles are breaking up in MDX HOT 1
- gitTimestamp missing in docker image with turbo
- ERROR WHEN DEPLOY HOT 1
- Feature Enquiry: Is there a Search Input field - that I can use to search through the whole documentation through?
- Feedback for “Cypress to Playwright”
- Could not find a declaration file for module 'nextra'. implicitly has an 'any' type
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nextra.