add transition to nav tree

user-agent detection is employed to ensure that the SSR renders the nav items by default for desktop (opposite for mobile). CSS media queries take over after the content loads on the device.

TODO: fix preview pane jump on desktop

tests/mobile.test.ts

@@ -1,6 +1,11 @@
 import { expect, test } from '@playwright/test';
 
-test.use({ viewport: { height: 2556, width: 1179 } });
+import UserAgent from 'user-agents';
+
+test.use({
+  viewport: { height: 2556, width: 1179 },
+  userAgent: new UserAgent({ deviceCategory: 'mobile' }).toString(),
+});
 
 test('mobile page has nav tree hidden by default', async ({ page }) => {
   await page.goto('/');