Better Mobile

.idea/workspace.xml

@@ -15,6 +15,7 @@
       <list>
         <option value="HTML File" />
         <option value="CSS File" />
+        <option value="JavaScript File" />
       </list>
     </option>
   </component>
@@ -29,21 +30,21 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "DefaultHtmlFileTemplate": "HTML File",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "last_opened_file_path": "D:/HTML/flufflparty",
-    "list.type.of.created.stylesheet": "CSS",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;DefaultHtmlFileTemplate&quot;: &quot;HTML File&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;last_opened_file_path&quot;: &quot;D:/HTML/flufflparty&quot;,
+    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
       <recent name="D:\HTML\flufflparty\Temp" />
@@ -59,7 +60,7 @@
       <updated>1679674447095</updated>
       <workItem from="1679674448294" duration="3278000" />
       <workItem from="1679754546660" duration="3762000" />
-      <workItem from="1679776338023" duration="1445000" />
+      <workItem from="1679776338023" duration="3821000" />
     </task>
     <servers />
   </component>

StartPage.js

@@ -0,0 +1,14 @@
+var menuActive = false;
+
+function showMobileMenuBar()
+{
+    if(!menuActive) {
+        document.getElementById("mobileMenuBar").style.display = "block";
+        menuActive = true;
+    }
+    else
+    {
+        document.getElementById("mobileMenuBar").style.display = "none";
+        menuActive = false;
+    }
+}

index.html

@@ -13,12 +13,9 @@
         <button>IO Game Studios</button>
 
         <nav>
+            <!-- Desktop-->
             <ul>
-<<<<<<< Updated upstream
-                <li>
-                    <a href="#">Games</a>
-=======
-<<<<<<< HEAD
+
                 <li class="menuDropdownDesktop">
                     Games
                     <div>
@@ -27,17 +24,33 @@
                             <li><button>Other</button></li>
                         </ul>
                     </div>
-=======
-                <li>
-                    <a href="#">Games</a>
->>>>>>> d42e8b34e9844fb27c9eaa20a1c6e2d671dd152f
->>>>>>> Stashed changes
                 </li>
                 <li>Quicklinks</li>
                 <li>About</li>
             </ul>
+
+            <!--Mobile-->
+            <button onclick="showMobileMenuBar()">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+                </svg>
+            </button>
         </nav>
     </header>
 
+    <menu id="mobileMenuBar">
+        <div>
+            <ul>
+                <li>Games</li>
+
+                <li>Quicklinks</li>
+
+                <li>About</li>
+            </ul>
+        </div>
+    </menu>
+
 </body>
+
+<script src="StartPage.js"></script>
 </html>

navigationStyle.css

@@ -44,18 +44,18 @@ header button
 
 header button:hover
 {
-    background-color: rgba(136, 179, 174, 0.2);
+    background-color: rgba(136, 179, 174, 0.5);
 }
 
 /*List Element Style (only navigation)*/
-header nav li
+nav li
 {
     display: inline-block;
     margin-right: 20px;
     cursor: pointer;
 }
 
-header nav li:hover
+nav li:hover
 {
     color: #88b3ae;
 }
@@ -67,8 +67,8 @@ nav ul li div
     position: absolute;
     background-color: #41423f;
     border-radius: 50px;
-    right: 330px;
     padding-top: 70px;
+    margin-left: -40px;
 }
 
 .menuDropdownDesktop:hover div
@@ -92,6 +92,18 @@ nav ul li div ul li button
 {
     padding: 10px;
 }
+
+/*Mobile Excluded*/
+nav > button
+{
+    display: none;
+}
+
+menu
+{
+    display: none;
+}
+
 /*
 ------------------------------------------------------------------------------------------
 Mobile
@@ -100,8 +112,56 @@ Mobile
 
 @media (max-width: 18cm)
 {
+
+    /*Hide the default navigation*/
     nav ul
     {
         display: none;
     }
+
+    /*Show the Mobile menu button*/
+    nav button
+    {
+        display: blocK;
+        margin-right: -20px;
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    /*Style the Menu Icon*/
+    nav svg
+    {
+        color: white;
+        width: 30px;
+        height: 30px;
+    }
+
+
+    menu div
+    {
+        float: right;
+        background-color: #41423f;
+        height: 100vh;
+    }
+
+    menu div ul
+    {
+        display: flex;
+        flex-direction: column;
+    }
+
+    menu div ul li
+    {
+        text-align: center;
+        padding: 30px 30px 30px 30px;
+        margin: 5px;
+        cursor: pointer;
+        border-radius: 50px;
+        background-color: rgba(136, 179, 174, 1);
+    }
+
+    menu div ul li:hover
+    {
+        background-color: rgba(136, 179, 174, 0.5);
+    }
+
 }