inventory

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

@@ -32,5 +32,10 @@ export class AppShellComponent {
   // squeeze the artwork the screen is built around.
   private readonly atLocation = isActive('/location', this.router);
 
-  protected readonly showContextPanel = () => !this.inCombat() && !this.atLocation();
+  // The inventory is itself three columns wide — doll, bag, selected item —
+  // and the area panel would push the bag down to a couple of cells a row.
+  private readonly atInventory = isActive('/inventory', this.router);
+
+  protected readonly showContextPanel = () =>
+    !this.inCombat() && !this.atLocation() && !this.atInventory();
 }

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

@@ -1,38 +1,57 @@
+/* The rail is the painted `sidepanel-left.png`: an ornate frame with six button
+   plates down the top and a dragon crest at the foot. The buttons below are
+   laid out in percentages so they land on those painted plates at any height —
+   the artwork stretches to the rail, and the tracks stretch with it.
+   Plate geometry measured from the art (see the ratios in the grid below). */
 :host {
   display: block;
-  background: var(--ar-panel);
+  background: var(--ar-bg) url('/assets/hud-elements/sidepanel-left.png') center / 100% 100%
+    no-repeat;
 }
 
 .side-navigation {
   display: grid;
-  align-content: start;
-  padding-block: var(--ar-space-3);
+  /* A lead-in, then one track per painted plate. */
+  grid-template-rows: 5.9% repeat(6, 8%);
+  row-gap: 1.1%;
+  block-size: 100%;
+  /* Percentage padding resolves against width — which is what the side insets
+     want anyway. */
+  padding-inline: 18.7% 17.1%;
+}
+
+/* Occupies the lead-in track. Without it the first button auto-places there and
+   the whole stack sits one plate too high. */
+.side-navigation::before {
+  grid-row: 1;
+  content: '';
 }
 
 .side-navigation__item {
   display: flex;
+  grid-row: span 1;
+  gap: var(--ar-space-2);
   align-items: center;
-  gap: var(--ar-space-3);
-  inline-size: 100%;
-  min-block-size: 4.3rem;
-  padding: var(--ar-space-3) var(--ar-space-4);
+  justify-content: center;
+  min-inline-size: 0;
+  padding: 0 var(--ar-space-2);
   border: 0;
-  border-block-end: 1px solid color-mix(in srgb, var(--ar-border) 65%, transparent);
-  border-inline-start: 3px solid transparent;
   color: var(--ar-text-muted);
+  /* The plate underneath is the button's frame; nothing is drawn on top. */
   background: transparent;
   font: inherit;
   text-align: start;
   text-decoration: none;
   transition:
     color var(--ar-motion-fast),
-    background var(--ar-motion-fast),
-    border-color var(--ar-motion-fast);
+    text-shadow var(--ar-motion-fast),
+    filter var(--ar-motion-fast);
 }
 
 .side-navigation__item img {
-  inline-size: 2.25rem;
-  block-size: 2.25rem;
+  flex: none;
+  inline-size: 1.9rem;
+  block-size: 1.9rem;
   object-fit: cover;
   border-radius: 50%;
 }
@@ -42,8 +61,8 @@
   display: grid;
   flex: none;
   place-items: center;
-  inline-size: 2.25rem;
-  block-size: 2.25rem;
+  inline-size: 1.9rem;
+  block-size: 1.9rem;
   border: 1px solid var(--ar-border-highlight);
   border-radius: 50%;
   color: var(--ar-gold);
@@ -51,37 +70,58 @@
 }
 
 .side-navigation__glyph app-location-icon {
-  inline-size: 1.25rem;
-  block-size: 1.25rem;
+  inline-size: 1.1rem;
+  block-size: 1.1rem;
 }
 
+.side-navigation__item span {
+  overflow: hidden;
+  font-size: 0.95rem;
+  letter-spacing: 0.02em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Active reads as the plate catching light, not as a bar bolted beside it. */
 .side-navigation__item--active {
-  border-inline-start-color: var(--ar-blue);
-  color: var(--ar-text);
-  background: linear-gradient(90deg, rgb(92 169 216 / 0.2), transparent);
-  box-shadow: inset 0 0 1.25rem rgb(92 169 216 / 0.08);
+  color: var(--ar-gold);
+  filter: drop-shadow(0 0 0.5rem rgb(201 164 95 / 0.45));
+  text-shadow: 0 0 0.6rem rgb(201 164 95 / 0.5);
 }
 
 .side-navigation__item:not(:disabled):hover,
 .side-navigation__item:not(:disabled):focus-visible {
   color: var(--ar-text);
-  background: rgb(255 255 255 / 0.04);
 }
 
 .side-navigation__item:disabled {
-  opacity: 0.52;
+  opacity: 0.42;
 }
 
+/* Narrow: the tall painted rail no longer fits, so the bar goes horizontal and
+   drops the artwork rather than squashing it. */
 @media (width < 620px) {
+  :host {
+    background: var(--ar-panel);
+  }
+
   .side-navigation {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-    padding: 0;
+    grid-template-rows: none;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    row-gap: 0;
+    block-size: auto;
+    padding-inline: 0;
+  }
+
+  .side-navigation::before {
+    display: none;
   }
 
   .side-navigation__item {
     justify-content: center;
     min-block-size: 3.5rem;
     padding: var(--ar-space-2);
+    border-block-end: 1px solid color-mix(in srgb, var(--ar-border) 65%, transparent);
   }
 
   .side-navigation__item span {