Limited customization options for Docs theme components.

[annalhq]

I'm exploring the customization capabilities of Nextra's doc theme, particularly for components like the navbar, footer, sidebar, toc, search bar etc. However, I'm encountering limitations in achieving the desired level of personalization within my local project.

1. Custom Component Injection: Is there a recommended approach to inject custom components (like a custom navbar or footer) into the existing doc theme layout? If not, are there plans to introduce such functionality in future releases?
2. Component Customization: Can the styles and functionality of the currently available theme components be overridden or extended locally? If so, could you please provide a clear example or documentation on how to achieve this?

Similar subproblem was discussed here #231 but there is no effective solution given there apart from this example by Jared Palmer which uses older version of Nextra.

[arno-fukuda]

@annalhq

1. Custom Component Injection: Navbar customization & Footer customization.

import CustomNavbar from './components/CustomNavbar'
import CustomFooter from './components/CustomFooter'

const config: DocsThemeConfig = {

 footer: {
    component:  <CustomFooter />
  },
 navbar: {
    component:  <CustomNavbar />
  }
}

2. Component Customization: Similarly there are multiple customization options. For style overwrites, it's indeed a little tricky as the build in components often don't have any unique identifiers. You might have to experiment with specific css selectors like:

   .nextra-scrollbar > p:first-child {
   text-transform: uppercase;
   }

[AowerDmax]

@arno-fukuda . I'm in the process of customizing the Sidebar Content, and I want to add a Tag filter button to the sideBar. I followed the doc inside. Found Typescript prompt I didn't find the corresponding type. How do I do that? customize-sidebar-content

Object Literal may only specify known properties,and 'titleComponent'does not exist in type '｛ autoCollapse？： boolean; defaultMenuCollapseLevel？： number；toggleButton？： boolean；｝