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