Hi friends,
We challanged to create a truly perfect website in both mobile and pc. An SPA preferably because OC supports that and it creates a great user experience.
Website structure is very simple, text and image blocks, tabs, bootstrap and turbo router.
The main challenge was to create a permanent navigation and offcanvas menu, as this provides a very smooth UX to the end users. And simply why not to try.
It appears to be a bit complicated in the end as it has to utilise quite a lot of oc.control and event features.
Break through:
We came with a simple solution to use in app.js:
addEventListener('navigation-menu:ready', (ev) => {
const navControl = ev.detail.control;
// ... get data from active page
navControl.setActive(pageData.activeNavLink);
});
So every page had to have a data with activeNavLink pointing the right menu item.
We did it this way on every page:
<script type="application/json" id="page-data" hidden>
{
"activeNavLink": "{{ activeNavLink }}",
"pageId": "{{ this.page.id }}",
"pageType": "{{ this.page.baseFileName }}",
"siteLangUrls": {
{% for site in sitePicker.sites %}
"{{ site.code }}": "{{ site.url }}"{% if not loop.last %},{% endif %}
{% endfor %}
}
}
</script>
p.s.: this is actually not on every page, but in header.htm, every page just have: [resources] vars[activeNavLink] = “home”
This is just one approach and I would be really happy to know how you solved this easiear. In Telegram comunity there seems not so many people are working with turbo router.
Ah yeah, the website to look at: https://aabb.team
Will be happy to know your thoughts on this.
Thanks in advance =)
P.p.s: We tried to code the permanent navigation menu for multilang switch too, but this task appears to be very hard as all the menu should be recreated with JS and totaly new urls. Right now using a JS. It gets necessary url from page-data siteLangUrls and window.location to it, so the page gets reloaded. Any better suggestion on that would be great.