Fix mobile report view UI [#146]

lightningorb commented 8 months ago

Summary by CodeRabbit

New Features
- Introduced a new navigation experience with the addition of a left drawer menu for mobile devices.
- Enhanced the report viewing experience by implementing a drawer component for navigating through report topics and subtopics.
- Updated the header structure for improved navigation and mobile responsiveness.
- Added conditional rendering for external links based on device type.
Refactor
- Updated and reorganized components for better code structure and consistency.
- Improved mobile responsiveness across various components.
- Adjusted navigation and menu components to enhance user experience on different devices.
Style
- Refined styles for a more cohesive look and better layout on mobile devices.
Chores
- Updated variable names and import paths for clarity and better maintainability.

coderabbitai[bot] commented 8 months ago

Walkthrough

The update focuses on enhancing mobile usability and reorganizing navigation elements across the application. Key changes include the introduction of a left-side menu for mobile views, optimization of the header and navigation for mobile devices, and adjustments to the report and menu components for better mobile interaction and desktop consistency. The effort streamlines user experience and aligns with mobile-first design principles.

Changes

File Path	Change Summary
`Header.svelte`, `LeftBurger.svelte`, `+layout.svelte`, `report/[report]/+layout.svelte`	Mobile optimizations: conditional rendering, mobile-specific navigation adjustments, and layout changes.
`Drawer.svelte`, `report/Report.svelte`, `rightMenu/...`	Introduced new components, refactored for mobile responsiveness, updated import paths, and renamed components for consistency.
`lib/store.ts`, `lib/i18n.ts`	Added new variables for state management and updated language representations.
`LanguageSelector.svelte`, `barChart/...`	Updated functionality for language selection and improved chart rendering logic.

Related issues

AIObjectives/talk-to-the-city-reports#146: The changes align with the objectives to optimize mobile usability, modify menus, and introduce mobile-specific navigation adjustments. This issue could be directly linked to the PR as it addresses the key objectives outlined.

🐰✨ In the realm of code, where rabbits dare to hop, We tweaked the view, made navigation pop. A drawer slides, a menu hides, on screens so small, Our furry paws, through lines of code, did gracefully crawl. So here's a cheer, from burrows deep and wide, For changes bold, where user joy resides. 🌟📱🎉

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

Tips

### Chat There are 3 ways to chat with CodeRabbit: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit-tests for this file.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit tests for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository from git and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit tests.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.

colleenm commented 8 months ago

Code additions LGTM, adding the drawer component makes sense.

I think this is fine to merge as is. There's one design bug that should be fixed, either her or in a follow-up:

Clicking "Home" or "About" navigates to a page with no left nav column content, so the behavior of the hamburger menu (showing/hiding Home/About buttons) looks a little odd.

Minimum viable fix:

when the hamburger menu is open, the hamburger icon should be an X instead of a hamburger
give the bar with the Home and About links a white drop shadow on the right side, so it looks like an overlay on top of the header

A more real fix for this would be showing a different drawer menu on non-report pages, where the "Home" and "About" buttons are links on the gray drawer background. But that requires having multiple views of the drawer menu for what's supposed to be a quick fix, so I'm happy to skip it for now if the min viable fix is straightforward.

AIObjectives / talk-to-the-city-reports