Help Needed: Modularizing Admin Dashboard with Shared Header, Sidebar, and Footer
Hi everyone,
I’m working on an admin dashboard built with Bootstrap, and the project contains multiple HTML pages. Each page has a header, sidebar, and footer coded separately within the same file, making it challenging to maintain consistency across all pages.
I want to refactor the structure so that header.html, sidebar.html, and footer.html can be created as standalone files and included in all other pages. This way, I can make updates to these components in one place, and the changes will reflect across the entire project.
The project code is available on GitHub: https://github.com/deepkpminfotech2/admin2
Can anyone guide me on how to achieve this? Any advice or examples would be greatly appreciated. Thank you! 😊
GitHub
GitHub - deepkpminfotech2/admin2
Contribute to deepkpminfotech2/admin2 development by creating an account on GitHub.
11 Replies
Do you know any js framework? Or webcomponents? Maybe the easiest way would be to take a look at Astro. It is pretty easy to make components with, so you can modularize your app.
https://astro.build/
It is a pretty easy to understand framework, that makes it possible to even create component in other frameworks like react, vue or svelte. But you can also just use Astro components. You can use vanilla js in those components if you like.
Astro
Astro
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
@deep.kpm please don't double post in future
ok sorry for that
i wanna do it with js, jquery.........
Creating a component system with vanilla js is possible I believe, but it's not the easiest way I think. I am not that familiar with using vanilla js for stuff like that.
it's possible by definition, all the frameworks are written in JS after all
True.
you can make a quick-and-dirty version that uses fetch to get the header and footer from the server and then inserts them into the DOM, or use a server side templating language
if the project is fairly static then go for astro
it would be the best choice for u
jquery has a plugin that lets you navigate to another page without reloading everything
however, i dont remember the name
Have you got your project fixed?
@deep.kpm Have you got your project fixed?
not yet