Hello, if I want to add an ul list to the hamburger menu with from the submenus that I see either on a click or on a hover mouse, should I do it this way or know something more efficient?
I can add individual items to the hamburger menu via a component, but I need to supply sub items there that will be displayed on the hover
Can you advise me? Thanks
<script type="text/discourse-plugin" version="0.1">
api.decorateWidget('menu-links:before', helper => {
return helper.h("li", [
helper.h("a.google", {
href:"https://google.com",
title: "Google",
}, helper.h('p', 'Google')),
]);
});
</script>
EDIT: SOLVED
**But one more thing, how I add tagert blank? **
2 Likes
keegan
(Keegan George)
June 29, 2022, 4:32pm
2
Return a widget:
What you could do is return your own custom widget to api.decorateWidget
, which will give you a lot more control in terms of applying attributes, state, actions, etc.
So you could do:
api.decorateWidget('menu-links:before', helper => {
return helper.widget.attach("custom-menu-links");
});
Then inside javascripts/discourse/widgets/custom-menu-links.js
, create a widget using the createWidget helper:
import { createWidget } from 'discourse/widgets/widget';
createWidget('custom-menu-links', {
...
});
Take a look at this topic to learn some of the features of Widgets:
The latest builds of Discourse are much faster at rendering topics thanks to our re-written post stream . I’ve written up our new plugin API but so far haven’t explained how the code all fits together. The purpose of this topic is to allow Discourse developers to understand how the new code works.
What’s a Virtual DOM?
A Virtual DOM is a data structure that enables browsers to re-render dynamic content very quickly. The technique was pioneered by React but has since been integrated into many oth…
I used widgets quite a bit in my dropdown header theme component, you might find some of the code helpful.
Adding target=“_blank”
You add it to the attributes object:
return helper.h('a.google',
{
attributes: {
href: "https://google.com",
target: "_blank",
title: "Google"
},
}
...
);
2 Likes