To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.
You should have a look at https://vaadin.com/directory#!addon/sliderpanel. Maybe you can set a fixed height like the one in here if you want the exact same look. Another way might be to make a component yourself usíng css. So you could make a layout that looks like the entire Get Help Panel(So including all Buttons/Links/Text and also the little "lip"/button that's visible) Then you align the component on the left with css using "position:absolute;" and "left:-whatever you need px;" in a way that only the little lip is visible. On click/hover you then replace the style with a new one which has left set to 0 and has a transition set on left or uses a valo animation, .... So this explanation is probablynot that helpful if you're not that fond with css so i would recommend you try the addon. If it doesn't work for you, you could have a look at its source code to see if you can change it to what you need. Otherwise i would recommend looking into the css attributes position, left, transition and the valo-animations.