Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a modern SaaS dashboard designed to define the navigation structure of a system. Its main purpose is to provide a clear and concise layout for users to easily navigate through various features and functionalities via a well-structured sidebar menu and submenus, ensuring an intuitive user experience.

## CORE FEATURES
1. **Sidebar Navigation**: A collapsible sidebar that provides quick access to main sections of the application, allowing users to navigate effortlessly between different areas.
2. **Submenu Structure**: Hierarchical organization of content through expandable submenus, facilitating easy access to nested features.
3. **Dashboard Overview**: A central dashboard area that summarizes key metrics and information, enhancing user visibility and engagement.
4. **User Profiles**: Custom user settings and profiles accessible through the navigation menu, allowing users to personalize their experience.
5. **Search Functionality**: A search bar integrated into the sidebar for quick access to features or settings, improving overall efficiency.
6. **Responsive Design**: A layout that adapts seamlessly to different screen sizes, ensuring a consistent and accessible experience across devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design emphasizes a clean and simple aesthetic, incorporating ample white space to create an uncluttered interface. The focus is on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and easy legibility.
- **Layout**: The main layout consists of a vertical sidebar on the left side, containing the primary navigation links. The dashboard area occupies the remaining width, providing space for graphs, charts, and key information.
- **Typography**: Use a modern sans-serif font (e.g., Inter or Roboto) for body text and headings, establishing a clear hierarchy with larger sizes for headings and consistent spacing for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design adjustments and a cohesive visual appearance.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Consider using React’s Context API or Zustand for light state management, if required for user interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Sidebar Component**: Develop the sidebar navigation component, ensuring it includes collapsible submenus. Utilize Tailwind CSS for styling.
3. **Implement Dashboard Layout**: Design the main dashboard layout, integrating a grid or flex layout to display metrics and information effectively.
4. **Add Routing**: Implement client-side routing with React Router for navigation between different sections of the app.
5. **Build User Profile Section**: Create a profile settings component accessible from the sidebar, allowing users to manage their settings.
6. **Integrate Search Functionality**: Develop a search bar component that filters through the sidebar items dynamically as users type.
7. **Ensure Responsiveness**: Utilize Tailwind’s responsive utilities to adjust layouts for tablet and mobile views.

## USER EXPERIENCE
The user experience focuses on simplicity and efficiency. Users will interact with the sidebar to navigate through different sections quickly. The expandable submenus provide contextually relevant options without overwhelming the user. The dashboard delivers immediate insights through intuitive visualizations, and the minimal design ensures that users can focus on their tasks without distractions. Responsive design will ensure that all features remain accessible on various devices, providing a seamless experience.