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
Sleep Twitch
Sleep Twitch2w ago
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.
Jochem
Jochem2w ago
@deep.kpm please don't double post in future
deep.kpm
deep.kpmOP2w ago
ok sorry for that i wanna do it with js, jquery.........
Sleep Twitch
Sleep Twitch2w ago
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.
Jochem
Jochem2w ago
it's possible by definition, all the frameworks are written in JS after all
Sleep Twitch
Sleep Twitch2w ago
True.
Jochem
Jochem2w ago
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
glutonium
glutonium2w ago
if the project is fairly static then go for astro it would be the best choice for u
ἔρως
ἔρως2w ago
jquery has a plugin that lets you navigate to another page without reloading everything however, i dont remember the name
Victor Etaduovie
Have you got your project fixed? @deep.kpm Have you got your project fixed?
deep.kpm
deep.kpmOP2w ago
not yet
Want results from more Discord servers?
Add your server