New to Hugo and excited to learn how this works. Coming from the React world.
I built a JS file in /assets/main.js.
I created a little matchMedia function to listen to the browser window resizing and file when it goes from mobile sizes to above mobile sizes (600px for me).
How can I expose my boolean variable in my partials and other template files?
For example, I have a header.html partial that constructions my navigation bar. And I want to access my boolean variable to render a hamburger menu on mobile sizes and a list nav when the viewport is bigger than mobile sizes.
I found this conversion:
But JS still runs in the browser so even though Hugo sites are static doesn’t mean you shouldn’t be able to use JS to alter the templates.
The point you are missing is that with node.js/npm you can process files/templates before they are put in a static distribution directory. In hugo this would probably be somewhere in the assets pipes.
For example, I have a header.html partial that constructions my navigation bar. And I want to access my boolean variable to render a hamburger menu on mobile sizes and a list nav when the viewport is bigger than mobile sizes.
I am pretty sure I misunderstand you, but what you want to do is create pages for mobile and pages for larger screens? That’s slightly early 21st century Today this is done with some responsive design wizardry. For instance using Bootstrap 4.
Hugo is just a static site generator. The browser-side stuff is still happening browser side, same as in React. Add your script to the page and it will do what it is supposed to do.
assets is for the pipe, where you dynamically create .js and .css files. Maybe that is the point where you should start.
Or simply put the main.js into static and link it from there to the <script>-tag.
Today this is done with some responsive design wizardry. For instance using