Go to file
Matt f68e3afacd
Build And Push Image / docker (push) Successful in 1m48s Details
Fix sidebar width and profile section design issues
- Increased collapsed sidebar width from 80px to 100px for better icon visibility
- Updated rail-width prop to 100 in all three layouts (admin, board, member)
- Fixed profile section avatar sizing - now uses size 32 in collapsed mode
- Simplified menu button to always show vertical dots icon
- Improved spacing and alignment in profile section for both states
- Removed conditional button variants for cleaner, consistent design

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-31 23:35:28 +02:00
.claude Fix sidebar collapse by removing CSS width overrides 2025-08-31 23:08:06 +02:00
.clinerules Second Commit 2025-08-06 13:56:58 +02:00
.gitea/workflows refactor: keep workflow simple 2025-08-06 19:11:51 +03:00
.playwright-mcp Fix sidebar width and profile section design issues 2025-08-31 23:35:28 +02:00
.serena Fix registration API to use new group-based user creation method 2025-08-31 19:13:09 +02:00
Design Remove hamburger buttons and implement enhanced sidebar design across all layouts 2025-08-31 15:38:19 +02:00
assets/scss Fix sidebar width and profile section design issues 2025-08-31 23:35:28 +02:00
components Standardize avatar display across application 2025-08-31 18:06:50 +02:00
composables Complete infrastructure reorganization to role-based structure 2025-08-30 22:44:04 +02:00
docs Replace date-fns with native date formatting and remove unused code 2025-08-14 15:08:40 +02:00
layouts Fix sidebar width and profile section design issues 2025-08-31 23:35:28 +02:00
middleware fix: Revert dashboard routing to use existing structure 2025-08-30 22:24:27 +02:00
pages Sort member lists by last name instead of first name 2025-08-31 18:58:16 +02:00
plugins Replace date-fns with native date formatting and remove unused code 2025-08-14 15:08:40 +02:00
public Add PWA support with install banner and app icons 2025-08-07 15:46:17 +02:00
scripts Add PWA support with install banner and app icons 2025-08-07 15:46:17 +02:00
server Fix registration API to use new group-based user creation method 2025-08-31 19:13:09 +02:00
utils Implement dues reminder system with monthly payment cycle 2025-08-15 14:39:22 +02:00
.dockerignore Initialize Nuxt.js project with Docker deployment setup 2025-08-06 14:31:16 +02:00
.env.example Add Keycloak integration support 2025-08-09 18:22:34 +02:00
.gitignore Clean up authentication troubleshooting artifacts 2025-08-07 15:14:02 +02:00
DOCKER_DEPLOYMENT_GUIDE.md chore: update Docker deployment guide and configuration 2025-08-07 01:32:20 +02:00
Dockerfile Enhance member deletion and implement template-based email system 2025-08-09 17:36:35 +02:00
ENVIRONMENT_VARIABLES.md fixes 2025-08-13 16:47:53 +02:00
README.md Initialize Nuxt.js project with Docker deployment setup 2025-08-06 14:31:16 +02:00
app.vue Move MonacoUSA logo from global overlay to dashboard nav toggle 2025-08-10 16:54:50 +02:00
docker-compose.yml chore: update Docker deployment guide and configuration 2025-08-07 01:32:20 +02:00
docker-entrypoint-debug.sh feat: add debug entrypoint script and enhance health check logging 2025-08-07 02:56:53 +02:00
docker-entrypoint.sh Initialize Nuxt.js project with Docker deployment setup 2025-08-06 14:31:16 +02:00
error.vue Refactor authentication system with tier-based access control 2025-08-07 12:28:41 +02:00
keycloak-rest-api.json Fix mobile Safari compatibility and correct Keycloak account URL 2025-08-09 18:44:33 +02:00
nginx-portal.conf Fix login authentication flow and improve proxy configuration 2025-08-07 12:55:15 +02:00
nuxt.config.ts Implement comprehensive glass morphism UI redesign 2025-08-31 13:10:45 +02:00
package-lock.json Redesign member dashboard with modern bento grid layout and animations 2025-08-31 13:50:07 +02:00
package.json Redesign member dashboard with modern bento grid layout and animations 2025-08-31 13:50:07 +02:00
tsconfig.json Initialize Nuxt.js project with Docker deployment setup 2025-08-06 14:31:16 +02:00

README.md

MonacoUSA Portal Foundation

This folder contains the complete foundation and implementation guide for creating the MonacoUSA Portal - a modern, responsive web portal built with the same proven tech stack as the Port Nimara client portal.

📁 Contents

1. MONACOUSA_PORTAL_IMPLEMENTATION.md

Complete step-by-step implementation guide containing:

  • Full project setup instructions
  • All code templates and configurations
  • Keycloak authentication implementation
  • NocoDB database integration
  • MinIO file storage setup
  • Responsive dashboard with Vuetify 3
  • PWA configuration
  • Production deployment guide
  • Testing and verification steps

2. CLINE_WORKSPACE_RULES.md

Cline workspace configuration file containing:

  • 🔧 Project overview and tech stack details
  • 🔧 Development guidelines and coding standards
  • 🔧 Environment configuration requirements
  • 🔧 Key features and capabilities
  • 🔧 Extension guidelines for adding new tools
  • 🔧 Troubleshooting and best practices
  • 🔧 Support resources and documentation

3. DOCKER_DEPLOYMENT_GUIDE.md

Complete Docker and CI/CD deployment guide containing:

  • 🐳 Multi-stage Docker build configuration
  • 🔄 Gitea Actions CI/CD pipeline setup
  • 📁 Volume management and persistent data
  • 🔍 Health checks and monitoring
  • 🛠️ Troubleshooting and best practices
  • 🔐 Security considerations and optimization

🚀 Quick Start

  1. Give the implementation guide to another Claude instance:

    • Copy the contents of MONACOUSA_PORTAL_IMPLEMENTATION.md
    • Provide it to Claude with instructions to follow the guide step-by-step
  2. Set up Cline workspace rules:

    • Copy the contents of CLINE_WORKSPACE_RULES.md
    • Add it to your Cline workspace rules for the new project

🎯 Project Specifications

  • Name: monacousa-portal
  • Domain: monacousa.org (configurable)
  • Colors: #a31515 (MonacoUSA red) primary, #ffffff (white) secondary
  • Tech Stack: Nuxt 3, Vue 3, Vuetify 3, Keycloak, NocoDB, MinIO
  • Features: PWA, Mobile-responsive, Dashboard layout, File storage

📋 What You'll Get

Following this implementation guide will create a complete portal foundation with:

Authentication System

  • Keycloak OAuth2/OIDC integration
  • Secure session management
  • Role-based access control
  • Login/logout functionality

Responsive Dashboard

  • Mobile-first design
  • Collapsible sidebar navigation
  • User profile display
  • Role-based menu items

File Management

  • MinIO S3-compatible storage
  • Upload/download functionality
  • File type validation
  • Secure access control

Database Integration

  • NocoDB API-first database
  • CRUD operations
  • Dynamic table access
  • Type-safe operations

PWA Features

  • Offline support
  • Install prompts
  • Service worker
  • Mobile optimization

Production Ready

  • Health check endpoints
  • Error handling
  • Security best practices
  • Deployment configuration

🛠️ Usage Instructions

For Implementation

  1. Create a new repository for your MonacoUSA Portal
  2. Follow the step-by-step guide in MONACOUSA_PORTAL_IMPLEMENTATION.md
  3. Configure your environment variables
  4. Set up Keycloak, NocoDB, and MinIO services
  5. Test the implementation
  6. Deploy to production

For Development

  1. Use CLINE_WORKSPACE_RULES.md as your Cline workspace rules
  2. Follow the coding standards and guidelines
  3. Extend the portal with your custom tools
  4. Maintain consistency with the established patterns

🎨 Customization

The foundation is designed to be easily customizable:

  • Branding: Update colors, logos, and text
  • Tools: Add new dashboard pages and functionality
  • APIs: Extend with custom server endpoints
  • Database: Add new tables and data structures
  • UI: Customize components and layouts

📞 Support

This foundation is based on the proven Port Nimara client portal architecture and includes:

  • Comprehensive documentation
  • Complete code examples
  • Best practices and patterns
  • Troubleshooting guides
  • Extension guidelines

The implementation guide is self-contained and can be followed by any developer or AI assistant to create the exact foundation you need.


Ready to build your MonacoUSA Portal! 🚀