Override NavBar and Footer

[cesarlevel]

A very basic example of overriding the NavBar and the Footer.

preview

Note: The NavBar doesn't have a background if the location is / but the preview is not showing this

[KasraTabrizi]

I have tried to do the same thing but the @redocly/ui module (for importing) in the Footer.tsx and Navbar.tsx could not be found. do you also have to import the Footer.tsx somewhere else or is putting it in the _override folder sufficient enough?

[adamaltman]

I believe putting it in the _override folder is sufficient.

[KasraTabrizi]

Hey adamaltan, thanks. I also found it why it didn't want to override the custom Navbar and Footer. I had to restart my whole application to see the change.

[KasraTabrizi]

I have a question. Overwriting the NavBar causes it not to be mobile responsive anymore (no hamburger menu anymore). Is there a wrapper we can use to make responsive again and to add the hamburger menu?

[adamaltman]

@KasraTabrizi Currently the hamburger would be implemented within your custom NavBar component. I've requested a simple example be added here so you can see.

[RomanHotsiy]

@KasraTabrizi I updated this PR with a basic responsive navbar implementation

[KasraTabrizi]

@RomanHotsiy

Thanks for the change!

[KasraTabrizi]

@RomanHotsiy

The responsiveness works as it should but the searchbar lost its search functionality. Is there a props I should set to true for the SearchBox component to enable it again? (e.g. <SearchBox search={true} />)

[RomanHotsiy]

@KasraTabrizi

The responsiveness works as it should but the search bar lost its search functionality.

Oh, yes, you should pass pathPrefix. But it only affects the Redocly Previews. Search should work fine in prod builds.

I updated the PR to show how to pass pathPrefix, see 498530f

[KasraTabrizi]

@RomanHotsiy

It works! Thanks a lot!

[RomanHotsiy]

Superseded by #223