Task: Audit B-connex UI/UX for Mobile Menu Navigation and General Architecture Issues Here is the current structure of the layout files: 1. app/Views/partials/topbar.php: ```php
... Signout / Signin buttons
``` 2. app/Views/partials/sidebar.php: ```php ``` 3. app/Views/layouts/main.php: ```php
``` 4. Relevant CSS Rules in public/assets/css/app.css: ```css .bcx-main { display: grid; grid-template-columns: 240px 1fr 320px; } .bcx-sidebar { background: var(--bg-2); border-right: 1px solid var(--line); } @media (max-width: 1100px) { .bcx-main { grid-template-columns: 220px 1fr; } .bcx-rightpanel { display: none; } } @media (max-width: 1024px) { .bcx-topnav { display: none; } } @media (max-width: 760px) { .bcx-main { grid-template-columns: 1fr; } .bcx-sidebar { display: none; } } ``` Findings: The user reported issues with menu navigation in mobile view. Currently, under 1024px the topnav hides (`display: none;`), and under 760px the sidebar also hides (`display: none;`). There is no hamburger menu button, mobile header menu, or navigation drawer to allow users on mobile or tablet views to navigate between different pages of B-connex (like campaigns, leads, billing, etc.). Action Required: Provide a detailed report analyzing this issue and recommend structural changes to resolve it. Also, provide a general code audit with rationales on potential issues, improvements, and functionality additions for B-connex. Format the output as a clean Markdown document covering: 1. Analysis of the Mobile Navigation issue (specifically what CSS classes are hidden and why navigation is blocked). 2. Proposed design/code fix (HTML changes in topbar.php / main.php, CSS classes to add to app.css, and JS toggle logic in app.js). 3. General code audit of B-connex: identify other potential layout or code issues. 4. Rationales for UX/functional improvements or additions to B-connex.