Markup the button however you'd like. We are keying on ID "sso-menu-toggle". Normally the button is shown only to logged in users (where we know their email address), but I've rigged this example to always show.
<div id="sso-bar" class="<?php echo ( is_user_logged_in() ? "" : "user-not-logged-in" ); ?>">
<a class="sso-toggle" id="sso-menu-toggle"><div id="sso-burger"></div></a>
<a href="<?php echo home_url( '/' ); ?>"><img id="horizontal-logo" src="<?php bloginfo('stylesheet_directory'); ?>/images/dloa-logo-horizontal.svg" style="height: 32px" /></a>
</div>
iFrame somewhere on the page, we've added it near the end of the page. The SRC for the iframe is in the form "https://api.diocesan.com/public/sso/menu" or if we know the users email, then "https://api.diocesan.com/public/sso/menu?user={email@address.com}"
<?php
$current_user = wp_get_current_user();
if ( $current_user ) {
$userEmail = "?user=" . urlencode( $current_user->user_email );
} else {
$userEmail = "";
}
?>
<iframe id="sso-side-menu" class="" src="https://api.diocesan.com/public/sso/menu<?php echo $userEmail; ?>" title="SSO Side Menu"></iframe>
<script type='text/javascript' src="<?php echo get_stylesheet_directory_uri(); ?>/sso/app.js"></script>
Functionality for click and reveal housed in app.js
Styling housed in sso-menu.css