Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Metronic 9 React transferring the sidebar


Tell me how to move the sidebar from demo5 to demo9. I tried it myself, but there is something missing to work in the demo9 template.

To make it clear which panel. Here is the link https://keenthemes.com/metronic/tailwind/react/demo5/public-profile/works . I need to make a page as well, but only in demo9. Thanks in advance.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)


Thanks for the advice, I changed everything and it worked. There is another question. How to make the navbar stick instead of the header when scrolling. Thank you in advance.



Hi,

Could you please clarify your question? By default demo5's header and sidebar are already fixed and sticky.

Regards,
Sean



I'm using the title and navigation bar from Demo9. And only the title is sticky there, and I need to make a navigation bar.



Hi,

Can you provide us with a test link via private reply ?

Are you using Demo 9 as the main demo and the title and navigation bar from Demo 5?

Regards,
Sean.



Header and navigation bar from demo9. And all the content from demo5. I performed the substitution as you advised in the first message.

https://keenthemes.com/metronic/tailwind/demo9/ - Header + navigation

Only the title is sticky, but I need to do the opposite.



Hi,

I'm sorry, but we could not fully understand the requirements here. If you have a screenshot or test link, that would be helpful. You can provide it via https://imgur.com or private reply here.

However, each demo's layout folder provides the sticky mode handling code. You can try to read the code and apply it where needed. The working code is there and based on your requirements you can rearrange it.

Regards,
Sean



Hi,

Sorry for the late reply.

I would suggest you use Demo 5 as a base for your app and customize its header with the required components from the Demo 9 Header.

Moving the sidebar from Demo 5 to Demo 9 requires major changes in the layout code.

Can you check and let us know if this plan works for you?

Regards,
Sean


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(