search

Redocly / developer-portal-starter

Starter template for the Redocly developer portal
https://redoc.ly
Other
64 stars 101 forks source link

Override NavBar and Footer #12

Closed cesarlevel closed 2 years ago

cesarlevel commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

I believe putting it in the _override folder is sufficient.

KasraTabrizi commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

KasraTabrizi commented 4 years ago

@RomanHotsiy

Thanks for the change!

KasraTabrizi commented 4 years ago

@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 commented 4 years ago

@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 https://github.com/Redocly/developer-portal-starter/pull/12/commits/498530f0da7978eb04d5222241d3bb3b7a99575a

KasraTabrizi commented 4 years ago

@RomanHotsiy

It works! Thanks a lot!

RomanHotsiy commented 2 years ago

Superseded by https://github.com/Redocly/developer-portal-starter/pull/223