Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a refined dashboard for users to manage their portfolios. It focuses on maintaining a consistent sidebar navigation experience throughout various sections, including dashboard and history, enhancing usability by ensuring the sidebar remains visible while the top navigation adjusts based on the selected content.

## CORE FEATURES
1. **Persistent Sidebar Navigation**: The sidebar remains visible across all sections, including dashboard and history, allowing for seamless navigation without losing context.
2. **Dynamic Top Navigation**: The top navigation adjusts based on the selected page, providing relevant options while maximizing screen space for content.
3. **User Authentication**: Secure login and user account management to ensure personalized access to portfolio data.
4. **Portfolio Management**: Users can easily edit, view, and manage their portfolio items directly from the dashboard.
5. **History Tracking**: A detailed history of user actions and changes made within the portfolio for easy access and review.
6. **Responsive Design**: The application is fully responsive, ensuring functionality and usability on various devices, including desktops, tablets, and mobile phones.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout will feature a fixed sidebar on the left, with a dynamic top navigation that updates based on user interaction. The main content area will adjust accordingly, providing ample space for information and interaction.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for state management (specify based on project needs).

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout Components**: Develop the sidebar and top navigation components, ensuring the sidebar is fixed while the top navigation is dynamic.
4. **Implement Routing**: Use React Router to handle navigation between the dashboard and history pages, maintaining state for user sessions.
5. **Develop Core Features**: Implement the portfolio management and history tracking functionalities, integrating with a mock or real backend if necessary.
6. **Responsive Design**: Utilize Tailwind CSS classes to ensure the layout is responsive and adjusts for different screen sizes.
7. **Testing**: Conduct usability testing to ensure that the sidebar remains functional and user-friendly across all sections.

## USER EXPERIENCE
Users will log in to access their portfolio dashboard, where they will see the persistent sidebar for navigation. Selecting different sections will dynamically update the top navigation while keeping the sidebar in view. Users can manage their portfolios and review their history in an intuitive manner, ensuring a streamlined and effective user experience throughout the application.