how do i make a module that is an expandable tray

[Anik200]

you get it, somehow is there any way to like add systray as "format-alt" for a module so that the tray pops up when clicked

[Ace-c]

You can make drawer, something like this - "group/launcher": {
"orientation": "horizontal",
"drawer": {
"transition-duration": 500,
"children-class": "launcher,",
"transition-left-to-right": true,
"click-to-reveal": true
},
"modules": [
"custom/launcher",(leader, that is being shown)
"tray",
"custom/..."
]
},

[Anik200]

i did add them to my style.css and config but no worky

You can make drawer, something like this - "group/launcher": { "orientation": "horizontal", "drawer": { "transition-duration": 500, "children-class": "launcher,", "transition-left-to-right": true, "click-to-reveal": true }, "modules": [ "custom/launcher",(leader, that is being shown) "tray", "custom/..." ] },

[Ace-c]

You added the modules, This is to deine drawer and this is just group, you have to define group modules and then style.css is something like this
/* Style for launchers */

#custom-launcher {
font-size: 15px;
margin: 10px;
padding-left: 5px;
padding-right: 10px;
text-shadow: 2 2 2px rgba(0, 0, 0, 1);
}

box#launcher {
margin-left: 5px;
margin-top: 6px;
margin-bottom: 6px;
margin-bottom: 5px;
border-radius: 7px;
background-color: alpha(@primary-container, 0.65);
}

box#launcher .horizontal {
margin-top: 4px;
margin-bottom: 4px;
margin-left: 2px;
margin-right: 10px;
padding-left: 7px;
border-radius: 5px;
background: linear-gradient(54deg, rgba(130, 119, 180, 1) 0%, rgba(91, 75, 138, 1) 50%, rgba(82, 54, 137, 1) 100%);
animation: gradient 20s ease infinite;
}

#tray {

padding-left: 7px;
padding-right: 7px;
margin-left: 10px;
margin-right: 0px;
border-radius: 2px;

}

#custom-dracula {
margin-top: 4px;
margin-bottom: 4px;
margin-left: 3px;
margin-right: 3px;
padding-left: 7px;
padding-right: 10px;
border-radius: 8px;
background: linear-gradient(45deg, rgb(121, 111, 161) 0%, rgba(62, 51, 92, 1) 50%, rgba(55, 38, 91, 1) 100%);
} here is mine tray

[Anik200]

You added the modules, This is to deine drawer and this is just group, you have to define group modules and then style.css is something like this /* Style for launchers */

#custom-launcher { font-size: 15px; margin: 10px; padding-left: 5px; padding-right: 10px; text-shadow: 2 2 2px rgba(0, 0, 0, 1); }

box#launcher { margin-left: 5px; margin-top: 6px; margin-bottom: 6px; margin-bottom: 5px; border-radius: 7px; background-color: alpha(@primary-container, 0.65); }

box#launcher .horizontal { margin-top: 4px; margin-bottom: 4px; margin-left: 2px; margin-right: 10px; padding-left: 7px; border-radius: 5px; background: linear-gradient(54deg, rgba(130, 119, 180, 1) 0%, rgba(91, 75, 138, 1) 50%, rgba(82, 54, 137, 1) 100%); animation: gradient 20s ease infinite; }

#tray {

padding-left: 7px;
padding-right: 7px;
margin-left: 10px;
margin-right: 0px;
border-radius: 2px;

}

#custom-dracula { margin-top: 4px; margin-bottom: 4px; margin-left: 3px; margin-right: 3px; padding-left: 7px; padding-right: 10px; border-radius: 8px; background: linear-gradient(45deg, rgb(121, 111, 161) 0%, rgba(62, 51, 92, 1) 50%, rgba(55, 38, 91, 1) 100%); } here is mine tray

dropping the dots of the waybar would be more helpful as i did not manage to make it work even after following your lead

[Ace-c]

You added the modules, This is to deine drawer and this is just group, you have to define group modules and then style.css is something like this /* Style for launchers */
#custom-launcher { font-size: 15px; margin: 10px; padding-left: 5px; padding-right: 10px; text-shadow: 2 2 2px rgba(0, 0, 0, 1); }
box#launcher { margin-left: 5px; margin-top: 6px; margin-bottom: 6px; margin-bottom: 5px; border-radius: 7px; background-color: alpha(@primary-container, 0.65); }
box#launcher .horizontal { margin-top: 4px; margin-bottom: 4px; margin-left: 2px; margin-right: 10px; padding-left: 7px; border-radius: 5px; background: linear-gradient(54deg, rgba(130, 119, 180, 1) 0%, rgba(91, 75, 138, 1) 50%, rgba(82, 54, 137, 1) 100%); animation: gradient 20s ease infinite; }
#tray {

padding-left: 7px;
padding-right: 7px;
margin-left: 10px;
margin-right: 0px;
border-radius: 2px;

}
#custom-dracula { margin-top: 4px; margin-bottom: 4px; margin-left: 3px; margin-right: 3px; padding-left: 7px; padding-right: 10px; border-radius: 8px; background: linear-gradient(45deg, rgb(121, 111, 161) 0%, rgba(62, 51, 92, 1) 50%, rgba(55, 38, 91, 1) 100%); } here is mine tray

dropping the dots of the waybar would be more helpful as i did not manage to make it work even after following your lead

Currently I'm writing script for to change whole theme sync and stuff so In between 1- 2 days I'll post my configs...

[Ace-c]

My dots - https://github.com/Ace-c/Frozen