[BUG]: Mobile navigation drawer omits Settings and API Keys pages, and lacks Profile/Logout actions

[Gautam25Raj]

Affected Apps / Packages

Studio (apps/studio)

Description

In mobile viewports (screens < 1024px), the navigation drawer in StudioShell.tsx only renders links from mainNav and supportNav. The bottomNav group, which contains critical pages like API Keys and Settings, is entirely omitted from the navigation drawer.

Additionally, the mobile drawer displays the user's name and email in a static container without any dropdown menu. As a result, mobile users have no way to access the Profile page, navigate to Settings or API Keys, or trigger Log out.

• Branch Name: fix/studio-mobile-nav-gaps
• PR Title: [Fix] [Studio]: render bottom nav and user options in mobile drawer

Steps to Reproduce

1. Open the Studio application on a mobile browser or size down the desktop window to trigger the mobile layout (width < 1024px).
2. Click the hamburger menu icon in the header to open the navigation drawer.
3. Observe that only "Overview", "Documents", "Templates", "Docs", and "Blog" links are present. "Settings" and "API Keys" are missing.
4. Look at the bottom user information card. It displays your name and email, but is static—clicking it does nothing, and there is no logout button or link to the Profile page.

Expected Behavior

The mobile drawer should include all navigation groups (mainNav, supportNav, bottomNav) or offer equivalent menu actions for Settings and API Keys. The user info section should allow navigating to the Profile page and logging out.

Environment Information

• App: @veriworkly/studio
• OS: Windows / macOS / Linux
• Browser: Chrome / Firefox / Safari / Edge
• Node.js: 20.x

Relevant Logs

No response

Proposed Fix / Suggestions

• Render bottomNav links in the mobile menu nav list in StudioShell.tsx.
• Add "Profile" and "Log out" buttons to the user card at the bottom of the mobile drawer (or render an interactive dropdown menu for it).