fix: gandalf navbar placement and mobile behavior

.nvmrc

@@ -0,0 +1 @@
+22

AGENTS.md

@@ -23,8 +23,10 @@ Update `docs/links.md` to add or modify community resources.
 
 ## Build and Verification
 
-- Always verify changes locally using `npm run docs:dev`.
-- Run `npm run docs:build` to ensure the production build is successful.
+- Use Docker for all development — do not run `npm install` directly.
+- Dev server with live reload: `docker compose up dev` (available at `http://localhost:5173`).
+- Production build: `docker compose up --build community` (available at `http://localhost:4174`).
+- Update packages inside the container: `docker run --rm -v "$(pwd):/app" -w /app node:22 npm install <package>`, then commit `package.json` and `package-lock.json`.
 - When modifying the UI, perform visual verification (e.g., using Playwright) to ensure style parity with `mume.org` is maintained.
 
 ## Deployment

Dockerfile

@@ -0,0 +1,23 @@
+FROM node:22-alpine AS builder
+
+RUN apk upgrade --no-cache
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+
+ARG VITE_BASE=/
+ENV VITE_BASE=${VITE_BASE}
+
+RUN npm run build
+
+FROM nginx:alpine
+
+RUN apk upgrade --no-cache
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 80

README.md

@@ -13,29 +13,39 @@ The site is built with **VitePress** and designed to match the style and layout
 
 ## Development
 
-### Prerequisites
+> **Use Docker.** All development should be done via Docker to keep the environment consistent with CI.
 
-- [Node.js](https://nodejs.org/) (Latest LTS recommended)
-- [npm](https://www.npmjs.com/)
-
-### Setup
+### Dev server (live reload)
 
 ```bash
-# Install dependencies
-npm install
+docker compose up dev
+```
+
+The site will be available at [http://localhost:5173](http://localhost:5173).
 
-# Start development server
-npm run docs:dev
+### Production build
+
+```bash
+docker compose up --build community
 ```
 
-### Build
+The site will be available at [http://localhost:4174](http://localhost:4174).
+
+To pass a custom base path:
 
 ```bash
-# Build for production
-npm run docs:build
+docker compose build --build-arg VITE_BASE=/community/ community
+docker compose up community
+```
+
+### Updating dependencies
 
-# Preview production build locally
-npm run docs:preview
+Always update packages inside the container so the lock file stays CI-compatible:
+
+```bash
+docker run --rm -v "$(pwd):/app" -w /app node:22 npm install <package>
+git add package.json package-lock.json
+git commit -m "chore: update dependencies"
 ```
 
 ## Deployment

docker-compose.yml

@@ -0,0 +1,20 @@
+services:
+  # Development server with live reload
+  dev:
+    image: node:22-alpine
+    working_dir: /app
+    volumes:
+      - .:/app
+      - /app/node_modules
+    command: sh -c "npm ci && npm run dev -- --host"
+    ports:
+      - "5173:5173"
+
+  # Production build served via nginx (mirrors deployment)
+  community:
+    build:
+      context: .
+      args:
+        VITE_BASE: /
+    ports:
+      - "4174:80"

docs/.vitepress/theme/Layout.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useData, useRoute, withBase } from 'vitepress'
-import gandalfImg from './gandalf_200.jpg'
+import gandalfImg from './gandalf_90.gif'
+import gandalfImg2x from './gandalf_90@2x.gif'
 import footerGandalf from '../../assets/images/gandalf.jpg'
 import footerHorseman from '../../assets/images/horsemannight.jpg'
 import './mume.css'
@@ -15,10 +16,6 @@ const gandalfRef = ref(null)
 
 const lastUpdated = __LAST_UPDATED__
 
-const toggleMenu = () => {
-  isMenuOpen.value = !isMenuOpen.value
-}
-
 let prevScrollpos = 0
 
 const handleScroll = () => {
@@ -27,7 +24,7 @@ const handleScroll = () => {
   const navbar = navbarRef.value
   const gandalf = gandalfRef.value
 
-  if (prevScrollpos > currentScrollPos || prevScrollpos < 10 || width <= 650) {
+  if (prevScrollpos > currentScrollPos || currentScrollPos < 10 || width <= 650) {
     if (navbar) navbar.style.top = "0"
     if (gandalf) gandalf.style.top = (width <= 650) ? "10px" : "22px"
   } else {
@@ -49,10 +46,10 @@ onUnmounted(() => {
 
 <template>
   <div class="theme-container">
-    <label class="toggle" for="toggle" @click="toggleMenu">
+    <label class="toggle" for="toggle">
       <i class="fa fa-bars" aria-hidden="true"></i> <span>Menu</span>
     </label>
-    <input class="toggle" id="toggle" type="checkbox" :checked="isMenuOpen" @change="isMenuOpen = $event.target.checked"/>
+    <input class="toggle" id="toggle" type="checkbox" v-model="isMenuOpen"/>
 
     <nav id="navbar" ref="navbarRef" role="navigation" aria-label="Main">
       <ul>
@@ -112,7 +109,7 @@ onUnmounted(() => {
       </ul>
     </nav>
 
-    <img id="gandalf" ref="gandalfRef" :src="gandalfImg" alt="Gandalf" width="45" height="45">
+    <img id="gandalf" ref="gandalfRef" :src="gandalfImg" :srcset="`${gandalfImg} 1x, ${gandalfImg2x} 2x`" alt="Gandalf" width="90" height="90">
 
     <div class="content">
       <div v-if="page.isNotFound" class="not-found">

docs/.vitepress/theme/mume.css

@@ -159,15 +159,18 @@ label.toggle {
     font-weight: 900;
     font-size: 2em;
     padding: 0.625rem 1.25rem; /* 10 px 20 px */
+    z-index: 110;
 }
 
 /* Navbar MUME Gandalf Logo */
 #gandalf {
   position: fixed;
   top: 22px; /* 1.313rem; */
   right: calc(50% + 31.25rem); /* 500 px */
-  z-index: 100;
+  z-index: 120;
   transition: top 0.3s;
+  width: 90px;
+  height: 90px;
 }
 
 /* Navbar links */