From 443262a9cd0d0d17cf09eaeb6d439ba6d5caf1d7 Mon Sep 17 00:00:00 2001
From: Rob Loach <robloach@gmail.com>
Date: Sun, 14 Jan 2018 23:57:53 -0500
Subject: [PATCH] emscripten: Allow hiding the top menu

---
 pkg/emscripten/libretro/index.html   | 10 ++++++++++
 pkg/emscripten/libretro/libretro.css | 19 +++++++++++++++++--
 pkg/emscripten/libretro/libretro.js  |  7 +++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/pkg/emscripten/libretro/index.html b/pkg/emscripten/libretro/index.html
index 132fa162ff..8fbba05723 100644
--- a/pkg/emscripten/libretro/index.html
+++ b/pkg/emscripten/libretro/index.html
@@ -95,6 +95,11 @@
                    </li>
                 </div>
                </ul>
+               <div class="toggleMenu">
+                  <button class="btn btn-primary" id="btnHideMenu" title="Toggle Menu">
+                     <span class="fa fa-chevron-up" id="icnHideMenu"></span> <span class="sr-only">Hide Top Navigation</span>
+                  </button>
+               </div>
            </div>
            <!--/.Collapse content-->
        </div>
@@ -102,6 +107,11 @@
    <div class="bg-inverse webplayer-container">
       <div class="container">
          <div class="webplayer_border text-xs-center" id="canvas_div">
+            <div class="showMenu">
+               <button type="button" class="btn btn-link">
+                  <span class="fa fa-chevron-down" id="icnShowMenu"></span> <span class="sr-only">Show Top Navigation</span>
+               </button>
+            </div>
             <canvas class="webplayer" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()" style="display: none"></canvas>
             <img class="webplayer-preview img-fluid" src="media/canvas.png" width="960px" height="720px" alt="RetroArch Logo">
          </div>
diff --git a/pkg/emscripten/libretro/libretro.css b/pkg/emscripten/libretro/libretro.css
index d5e6b52d89..eb848542c9 100644
--- a/pkg/emscripten/libretro/libretro.css
+++ b/pkg/emscripten/libretro/libretro.css
@@ -92,8 +92,23 @@ textarea {
     font-size: 0.7em;
     height: 95%;
     width:  95%;
-    border-style: none; 
-    border-color: transparent; 
+    border-style: none;
+    border-color: transparent;
     overflow: auto;
     resize: none;
 }
+
+/**
+ * Toggle Top Navigation
+ */
+.toggleMenu {
+   float: right;
+}
+.showMenu {
+   position: absolute;
+   right: 0;
+   cursor: pointer;
+}
+#icnShowMenu {
+   color: #565656 !important;
+}
diff --git a/pkg/emscripten/libretro/libretro.js b/pkg/emscripten/libretro/libretro.js
index 6b946ed350..b79fdf691f 100644
--- a/pkg/emscripten/libretro/libretro.js
+++ b/pkg/emscripten/libretro/libretro.js
@@ -230,6 +230,13 @@ $(function() {
       placement: 'right'
    });
 
+   // Allow hiding the top menu.
+   $('.showMenu').hide();
+   $('#btnHideMenu, .showMenu').click(function () {
+      $('nav').slideToggle('slow');
+      $('.showMenu').toggle('slow');
+   });
+
    /**
     * Attempt to disable some default browser keys.
     */