how to hide header menu item when using mobile devices?

[jayv25585659]

so I have a custom menu item that I'm displaying on my header (it's just an icon that displays a menu on hover)

<sly data-sly-use.bookmark="berkeley/components/global/bookmark-menu/bookmark-menu.html" data-sly-call="${bookmark.object@detailListFlag=''}" data-sly-unwrap />

I have a need that I need to omit/hide this menu item while using mobile devices.

while I can use Javascript to do this (jQuery + wurlf-js), I'm wondering if this can be done by some sort of something already built-in to AEM (example: Java libraries). If there is something available, can you please provide a link or perhaps a short example?

Thanks a lot

[Hemant_arora · Accepted solution]

Get the device type from a generic service class and use the value of that variable in sightly and add condition

WCMUsePojo class

if(request.getHeader("User-Agent").indexOf("Mobile") != -1) {

    //you're in mobile land 

} else {

    //nope, this is probably a desktop 

}

SIGHTLY

<li data-sly-test="${isMobile}">text</li>

[smacdonald2008]

NIce answer - which is correct!