Improve mobile navigation chrome and sidebar drawer motion

[steve8708]

Motivation

• The Analytics mobile top bar used a contrasting sidebar color and included an app icon that made the header feel visually heavy on mobile, so it should match the main page background and remove the decorative icon for a cleaner chrome.
• Several template apps (Assets, Design, Slides) used a mobile hamburger drawer that snapped open without motion, creating inconsistent UX compared to Analytics, so they should animate in with a slide transition for parity.

Description

• Updated templates/analytics/app/components/layout/MobileNav.tsx to remove the app icon and change the top bar background from bg-sidebar to bg-background.
• Added CSS transition classes (transition-transform duration-200 ease-out and md:transition-none) to the mobile drawer container in templates/assets/app/components/layout/Layout.tsx, templates/design/app/components/layout/Layout.tsx, and templates/slides/app/components/layout/Layout.tsx so the drawer slides in/out on mobile.
• Added pending changelog entries under templates/{analytics,assets,design,slides}/changelog/2026-06-27-mobile-navigation-chrome-and-motion.md describing the visible mobile navigation polish.
• Formatted edited files with oxfmt and committed the changes to the current branch with commit message "Improve mobile navigation chrome".

Testing

• Ran pnpm oxfmt on the modified files and it completed successfully.
• Attempted pnpm --filter ./templates/analytics typecheck but the check failed to run in this environment because the local Node version is v20.20.2 while agent-native requires Node 22+, so typechecking did not complete.

---

⠀

🟡 Changes are committed on the current branch; pushing and full typecheck are blocked by the local environment (no origin remote configured and Node 22+ required).

---

Codex Task

[github-actions]

Here's a visual recap of what changed:

Open the full interactive recap

[builder-io-integration]

Builder reviewed your changes — looks good ✅

Review Details

This incremental update remains a low-risk PR focused on mobile navigation polish, with one additional housekeeping change in pnpm-lock.yaml. The user-facing behavior is unchanged from the earlier review intent: Analytics still simplifies its mobile top bar by switching to the page background and removing a decorative chart icon, while Assets, Design, and Slides add a short transform transition to their mobile sidebar drawers. The lockfile delta removes stale importer entries for retired templates that no longer exist in the workspace, which aligns with the current repository layout and does not introduce package or install risk.

I re-reviewed the latest diff directly and ran two independent code-review passes with identical focus areas to reduce position bias. Both came back clean. The touched code paths preserve the existing menu button labeling, drawer open/close state handling, route-change auto-close logic, and md+ breakpoint guards such as md:static, md:translate-x-0, and md:transition-none, so the desktop behavior should remain intact.

Risk assessment: Low.

🧪 Browser testing: Will run after this review (PR touches UI code)