mcp-open-client 0.3.3

MCP Open Client - A NiceGUI-based chat application for Claude

Drawer Close Button Positioning Solution

This repository contains a comprehensive solution for moving the drawer close button from its default right position to the left side in a NiceGUI application that uses Quasar components.

Files Included

• settings/app-styles.css: Contains 7 different CSS selector options to move the drawer close button
• drawer-button-verification.md: Guide for testing and troubleshooting the solution
• drawer-solution-summary.md: Summary of the approach and explanation of CSS options
• browser-specific-fixes.css: Additional CSS for browser compatibility
• custom-drawer-example.py: Alternative Python implementations with custom drawers

Quick Start

1. Include the CSS from settings/app-styles.css in your NiceGUI application
2. Test the drawer close button position
3. If needed, refer to drawer-button-verification.md for troubleshooting

CSS Solution

The primary solution uses CSS to change the justify-content property of the drawer header from flex-end (right-aligned) to flex-start (left-aligned). Multiple selector options are provided to ensure compatibility with different Quasar/NiceGUI versions.

Example:

.q-drawer__content > div:first-child {
  justify-content: flex-start !important;
}

Alternative Approaches

If the CSS solution doesn't work for your specific implementation, alternative approaches are provided:

1. Custom Drawer Header: Create your own drawer header with a manually positioned close button
2. JavaScript Solution: Use client-side JavaScript to reposition the button programmatically
3. CSS Hiding Technique: Hide the default button and add your own in the desired position

Browser Compatibility

The solution includes specific fixes for:

• Chrome and Chromium-based browsers
• Firefox
• Safari
• Edge/IE Legacy
• Mobile devices
• High-density displays

Integration with NiceGUI

The solution is designed to work with NiceGUI's implementation of Quasar's drawer component. It respects the existing drawer functionality while only changing the position of the close button.

Troubleshooting

If you encounter issues:

1. Check which CSS selector works best for your specific implementation
2. Use browser developer tools to inspect the drawer structure
3. Try the alternative approaches provided in custom-drawer-example.py
4. Refer to drawer-button-verification.md for detailed troubleshooting steps

License

This solution is provided under the MIT License.