Sidebar becomes a mobile drawer below 768px

The sidebar was flex:0 0 15rem inside .app__body unconditionally, so
on a narrow viewport it and the main content just fought over space.
Below 768px it now leaves the flex flow entirely (position: fixed,
translated off-canvas by default) and slides in as a drawer instead,
leaving .app__main the full width.

- App.vue: a ☰ button in the header (hidden above the breakpoint)
  opens it; a backdrop tap, the drawer's own close button, or any
  navigation (route.fullPath watcher) closes it. State lives in
  App.vue since the toggle button is in the header, not the sidebar.
- AppSidebar.vue: a close button (✕), only visible in the drawer,
  emitting 'close'.
- Desktop (>=768px) layout and behaviour is untouched -- the drawer
  CSS and the toggle button both live behind the same media query.

Drag-and-drop is untouched, as asked -- this only affects layout, and
the sidebar's inbox draggable works the same as before either way.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/components/AppSidebar.vue

@@ -16,6 +16,11 @@ const inbox = useInboxStore()
 const router = useRouter()
 const route = useRoute()
 
+// Only meaningful on mobile, where the sidebar is a drawer (see style.css) --
+// its own close button emits this to tell App.vue to close it (App.vue also
+// closes it directly on a backdrop tap or any navigation).
+const emit = defineEmits<{ close: [] }>()
+
 const loadError = ref<string | null>(null)
 
 onMounted(() => {
@@ -96,6 +101,8 @@ async function onInboxChange(change: ColumnChange) {
 
 <template>
   <aside class="sidebar">
+    <button type="button" class="sidebar__close" aria-label="Close menu" @click="emit('close')">&#10005;</button>
+
     <nav class="sidebar__nav">
       <RouterLink :to="{ name: 'dashboard' }" class="sidebar__link" active-class="sidebar__link--active">
         <svg class="sidebar__icon" viewBox="0 0 16 16" aria-hidden="true">