fix: hide mobile menu scrollbar & bump version to 1.11.1

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-nonograms-solid",
-      "version": "1.11.0",
+      "version": "1.11.1",
       "dependencies": {
         "fireworks-js": "^2.10.8",
         "flag-icons": "^7.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "homepage": "https://nonograms.7u.pl/",
   "type": "module",
   "scripts": {

public/nonograms.svg

@@ -1,28 +1,44 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
-  <rect width="192" height="192" fill="#0b0f1f"/>
-  <g transform="translate(24,24)">
-    <rect x="0" y="0" width="144" height="144" rx="16" fill="#121639" stroke="#00f2fe" stroke-width="4"/>
-    <g stroke="#00f2fe" stroke-width="2">
-      <line x1="24" y1="0" x2="24" y2="144"/>
-      <line x1="48" y1="0" x2="48" y2="144"/>
-      <line x1="72" y1="0" x2="72" y2="144"/>
-      <line x1="96" y1="0" x2="96" y2="144"/>
-      <line x1="120" y1="0" x2="120" y2="144"/>
-      <line x1="0" y1="24" x2="144" y2="24"/>
-      <line x1="0" y1="48" x2="144" y2="48"/>
-      <line x1="0" y1="72" x2="144" y2="72"/>
-      <line x1="0" y1="96" x2="144" y2="96"/>
-      <line x1="0" y1="120" x2="144" y2="120"/>
-    </g>
-    <g fill="#00f2fe">
-      <rect x="6" y="6" width="18" height="18" rx="3"/>
-      <rect x="54" y="30" width="18" height="18" rx="3"/>
-      <rect x="102" y="78" width="18" height="18" rx="3"/>
-      <rect x="30" y="126" width="18" height="18" rx="3"/>
-    </g>
-    <g fill="#ffffff">
-      <path d="M36 40 h16 v64 h-16 z"/>
-      <path d="M52 40 h16 l32 48 v-48 h16 v64 h-16 l-32 -48 v48 h-16 z"/>
-    </g>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#43C6AC"/>
+      <stop offset="1" stop-color="#191654"/>
+    </linearGradient>
+    <linearGradient id="cell" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#00f2fe"/>
+      <stop offset="1" stop-color="#4facfe"/>
+    </linearGradient>
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+  </defs>
+  
+  <!-- Main Background -->
+  <rect width="192" height="192" rx="42" fill="url(#bg)"/>
+  
+  <!-- Console Screen Background -->
+  <rect x="26" y="26" width="140" height="140" rx="16" fill="rgba(0,10,30,0.5)" stroke="rgba(0,242,254,0.2)" stroke-width="1.5"/>
+
+  <!-- Letter N built from Nonogram cells -->
+  <g fill="url(#cell)" filter="url(#glow)">
+    <!-- Left Column -->
+    <rect x="38" y="38" width="20" height="20" rx="4"/>
+    <rect x="38" y="62" width="20" height="20" rx="4"/>
+    <rect x="38" y="86" width="20" height="20" rx="4"/>
+    <rect x="38" y="110" width="20" height="20" rx="4"/>
+    <rect x="38" y="134" width="20" height="20" rx="4"/>
+    
+    <!-- Diagonal -->
+    <rect x="62" y="62" width="20" height="20" rx="4"/>
+    <rect x="86" y="86" width="20" height="20" rx="4"/>
+    <rect x="110" y="110" width="20" height="20" rx="4"/>
+    
+    <!-- Right Column -->
+    <rect x="134" y="38" width="20" height="20" rx="4"/>
+    <rect x="134" y="62" width="20" height="20" rx="4"/>
+    <rect x="134" y="86" width="20" height="20" rx="4"/>
+    <rect x="134" y="110" width="20" height="20" rx="4"/>
+    <rect x="134" y="134" width="20" height="20" rx="4"/>
   </g>
-</svg>
+</svg>

src/components/NavBar.vue

@@ -321,8 +321,10 @@ watch(isMobileMenuOpen, (val) => {
         </transition>
       </div>
     </div>
+  </nav>
 
-    <!-- Mobile Menu Overlay -->
+  <!-- Mobile Menu Overlay -->
+  <Teleport to="body">
     <transition name="fade">
         <div v-if="isMobileMenuOpen" class="mobile-menu-overlay">
             <div class="mobile-menu-header">
@@ -402,7 +404,7 @@ watch(isMobileMenuOpen, (val) => {
                               />
                          </div>
                         <div class="lang-list mobile-lang-list">
-                             <button
+                              <button
                                 v-for="lang in filteredLanguages"
                                 :key="lang.code"
                                 class="mobile-sub-item"
@@ -420,7 +422,7 @@ watch(isMobileMenuOpen, (val) => {
             </div>
         </div>
     </transition>
-  </nav>
+  </Teleport>
 </template>
 
 <style scoped>