To Fred and anyone willing to have panel experience a bit improved with this handles helping to open sliding panels:
Please take look at this screen:
You can see two handles on the screen (you can of course use only one option).
Once you click on the handle, it hides and the panel is being show. Once you close the panel, the handle comes back.
Good news is that with a bit of effort you can create as many handles as you wish 
.
Now, to get this effect please follow this steps:
STEP 1)
On your page create two Appery HTML components. First one for left handle and the second one for right handle. Name them as you like. Then select component type to HTML and click 'Edit HTML'. Use this as HTML source for left handle component:
////
// ClickMe//
////
and this in case of right handle component:
"
ClickMe
"
Now we need a small trick, to make this handles' position fixed (not scrolling with the rest of page content). Drag them to page header (if not visible then enable it on page settings) Please remember to set the height property of HTML components to 0px, otherwise they will break header styling. Perhaps there is better way of fixing handles but I haven't found it (despite trying very hard...).
STEP 2)
Create JS asset containing this simpe code:
function togglePanelHandle(handleID, position){
// This function hides and unhides panel handle
document.querySelector(handleID + '-' + position).classList.toggle('handle-visible-' + position);
document.querySelector(handleID + '-' + position).classList.toggle('handle-hidden-' + position);
}
STEP 3)
We need something to hide handles when we open our panel. So please click on the left handle component created in the STEP 1 and add this JS to CLICK event:
togglePanelHandle('#PanelHandle', 'left');
do the same for right handle but use this JS:
togglePanelHandle('#PanelHandle', 'right');
Now we need something to open our panel. To do this click on left HTML component created in the STEP 1 and add 'Open panel' on click event (select the panel you wish to open from the drop-down list). For me the best option is to use left handle to open right-positioned panel and right handle to open left-positioned panel because they are animated simultaneously.
STEP 4)
Create CSS asset in Appery containing this:
/* This is styling for left and right panel handle */
/* General styling */
.handle {
width: 22px;
height: 65px;
position: absolute;
top: 200px;
background: #07a4cf;
opacity:0.6;
border: 1px solid #07a4cf;
overflow:hidden !important;
}
.handle-label {
width: 20px;
height: 63px;
position: absolute;
text-shadow: none;
color:#ffffff;
}
/* Left handle styling */
.handle-left {
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.handle-label-left {
top: 20px;
left: 22px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
writing-mode: lr-bt;
}
.handle-visible-left {
transition: 0.4s;
left: 0px;
}
.handle-hidden-left {
transition: 0.4s;
left:-25px;
}
/* Right handle styling */
.handle-right {
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}
.handle-label-right {
top: -18px;
right: 22px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
writing-mode: lr-tb;
}
.handle-visible-right {
transition: 0.4s;
right: 0px;
}
.handle-hidden-right {
transition: 0.4s;
right:-25px;
}
STEP 5)
In this step we need something that will show our handle again when the panel is closed. This is actually pretty simple. Just add this JS:
togglePanelHandle('#PanelHandle', 'left');
to 'Close panel' event in your Panel component. Remember to use this:
togglePanelHandle('#PanelHandle', 'right');
if your panel is on the left side.
My final remark: this solution was tested in Appery web tester and on iOS iPhone. You might need some extra tweaking on other platforms, especially in terms of vendor prefixes.
Also, I am pretty sure that some part of this solution can be improved. Feel free to do so.
Appery, you might want to add this functionality as an option in further releases, but it is just my opinion.
the HTML provided in STEP 1
