Basic Mobile Menu

_script/ui/menu.js

@@ -121,10 +121,14 @@ let Menu = function(){
     }
 
     me.close = function(){
+        if (container) container.classList.remove("active");
         me.deActivateMenu();
     }
 
     function generate(){
+        $div("hamburger menuitem","",container,()=>{
+            container.classList.toggle("active");
+        })
         items.forEach((item,index)=>{
             item.element = $link("menuitem main handle",item.label,container,(e) =>{
                 me.activateMenu(index);

_script/ui/modal.js

@@ -71,6 +71,12 @@ var Modal = function(){
         if (dialog){
             let width = data.width || dialog.width || 440;
             let height = data.height || dialog.height || 260;
+
+            let maxWidth = window.innerWidth - 20;
+            let maxHeight = window.innerHeight - 20;
+            if (width > maxWidth) width = maxWidth;
+            if (height > maxHeight) height = maxHeight;
+
             modalWindow.style.width = width + "px";
             modalWindow.style.height = height + "px";
             let top = 'calc(50vh - ' + (height>>1) + 'px)';

_style/_menu.scss

@@ -8,10 +8,14 @@
   height: 25px;
   background-color: $panel-background-color;
   color: $menu-text-color;
-  z-index: 10;
+  z-index: 1000;
   user-select: none;
   white-space: nowrap;
 
+  .hamburger{
+    display: none;
+  }
+
   a.main{
     position: relative;
     display: inline-block;

_style/_mobile.scss

@@ -0,0 +1,62 @@
+@media only screen and (max-width: 800px) {
+ .menu{
+   width: 100px;
+   height: auto;
+   top: 27px;
+   border: none;
+
+   .hamburger{
+     display: block;
+     background-image: url("../_img/hamburger.svg");
+     width: 32px;
+     height: 27px;
+     background-size: 24px 24px;
+     background-repeat: no-repeat;
+     background-position: center center;
+     position: absolute;
+     top: -27px;
+   }
+
+   a.main{
+     display: none;
+     font-size: 13px;
+     border: 1px solid black;
+     border-bottom: none;
+     padding: 2px 10px;
+
+     &:last-child{
+       border-bottom: 1px solid black;
+     }
+
+     .sub{
+       left: 100px;
+       top: 0;
+
+       a{
+         font-size: 13px;
+         border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+         padding: 2px 20px 2px 10px;
+
+         &:last-child{
+           border-bottom: none;
+         }
+
+         &.wide{
+           padding: 2px 80px 2px 10px;
+         }
+
+         &.ultrawide{
+           padding: 2px 100px 2px 10px
+         }
+       }
+     }
+   }
+
+
+   &.active{
+     a.main{
+       display: block;
+     }
+   }
+ }
+}

_style/main.scss

@@ -60,4 +60,5 @@ h1.error{
 @import "cursor";
 @import "modal";
 @import "fileBrowser";
-@import "uae";
+@import "uae";
+@import "mobile";