fix: optimize shell accessibility and assets

apps/web/src/app/layout/app-shell/app-shell.component.scss

@@ -27,11 +27,22 @@
 
 @media (width < 900px) {
   .app-shell__content {
-    grid-template-columns: minmax(8.5rem, 10rem) minmax(0, 1fr);
+    grid-template:
+      'navigation main' minmax(0, 1fr)
+      'context context' auto / minmax(8.5rem, 10rem) minmax(0, 1fr);
+  }
+
+  app-side-navigation {
+    grid-area: navigation;
+  }
+
+  .app-shell__main {
+    grid-area: main;
   }
 
   app-context-panel {
-    display: none;
+    display: block;
+    grid-area: context;
   }
 }
 

apps/web/src/app/layout/side-navigation/side-navigation.component.html

@@ -5,8 +5,9 @@
     routerLink="/world"
     data-navigation="world"
     aria-current="page"
+    aria-label="Karte"
   >
-    <img src="/images/hud/MapsIcon.png" alt="" />
+    <img src="/images/hud/runtime/MapsIcon-128.png" alt="" />
     <span>Karte</span>
   </button>
 
@@ -17,7 +18,7 @@
     disabled
     aria-label="Jagd ist noch nicht verfügbar"
   >
-    <img src="/images/hud/HuntIcon.png" alt="" />
+    <img src="/images/hud/runtime/HuntIcon-128.png" alt="" />
     <span>Jagd</span>
   </button>
   <button
@@ -27,7 +28,7 @@
     disabled
     aria-label="Quests sind noch nicht verfügbar"
   >
-    <img src="/images/hud/QuestsIcon.png" alt="" />
+    <img src="/images/hud/runtime/QuestsIcon-128.png" alt="" />
     <span>Quests</span>
   </button>
   <button
@@ -37,7 +38,7 @@
     disabled
     aria-label="Inventar ist noch nicht verfügbar"
   >
-    <img src="/images/hud/InventoryIcon.png" alt="" />
+    <img src="/images/hud/runtime/InventoryIcon-128.png" alt="" />
     <span>Inventar</span>
   </button>
   <button
@@ -47,7 +48,7 @@
     disabled
     aria-label="Charakter ist noch nicht verfügbar"
   >
-    <img src="/images/hud/CharacterIcon.png" alt="" />
+    <img src="/images/hud/runtime/CharacterIcon-128.png" alt="" />
     <span>Charakter</span>
   </button>
 </nav>

apps/web/src/app/layout/top-bar/top-bar.component.html

@@ -1,6 +1,6 @@
 <header class="top-bar">
   <div class="top-bar__character">
-    <img class="top-bar__portrait" src="/images/hud/CharacterIcon.png" alt="" />
+    <img class="top-bar__portrait" src="/images/hud/runtime/CharacterIcon-128.png" alt="" />
     @if (character(); as character) {
       <div class="top-bar__identity">
         <span class="top-bar__name">{{ character.name }}</span>