Giter Club home page Giter Club logo

Comments (6)

arno-fukuda avatar arno-fukuda commented on June 26, 2024 1

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.

arno-fukuda avatar arno-fukuda commented on June 26, 2024 1

looking great!

from nextra.

alamenai avatar alamenai commented on June 26, 2024

Thank you @arno-fukuda , I'll try it this evening.

from nextra.

alamenai avatar alamenai commented on June 26, 2024

Hi @arno-fukuda , yes it works as expected, thank you.

image

from nextra.

alamenai avatar alamenai commented on June 26, 2024

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.

alamenai avatar alamenai commented on June 26, 2024

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>
      );
    },

image

from nextra.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.