feat: redesign sidebar with corporate branding and ProsApp logo

- Logo: network image in white card + tagline
- Sidebar: deep navy gradient (#0D1B3E) with blue accent active states
- MenuItem: left accent bar indicator, cleaner hover, better contrast
- Mode toggle: gradient button matching brand colors
- TextSeparator: uppercase label with divider line

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

lib/ui/shared/sidebar.dart

@@ -9,8 +9,6 @@ import 'package:prosapp_web_app/services/notifications_service.dart';
 import 'package:prosapp_web_app/ui/shared/widgets/menu_item.dart';
 import 'package:prosapp_web_app/ui/shared/widgets/text_separator.dart';
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
-
 import 'package:prosapp_web_app/ui/shared/widgets/logo.dart';
 import 'package:provider/provider.dart';
 
@@ -29,21 +27,20 @@ class Sidebar extends StatelessWidget {
     final professionalProvider = Provider.of<ProfessionalProvider>(context);
 
     return Container(
-      width: 200,
+      width: 220,
       height: double.infinity,
       decoration: buildBoxDecoration(),
       child: ListView(
         physics: const ClampingScrollPhysics(),
         children: [
           const Logo(),
-          const SizedBox(height: 50),
+          const SizedBox(height: 8),
+
           if (professionalProvider.isProModeActive) ...[
             const TextSeparator(text: 'Profesional'),
             MenuItem(
-                isActive:
+              isActive: sideMenuProvider.currentPage == Flurorouter.profileRoute ||
-                    sideMenuProvider.currentPage == Flurorouter.profileRoute ||
+                  sideMenuProvider.currentPage == Flurorouter.professionalProfileRoute,
-                        sideMenuProvider.currentPage ==
-                            Flurorouter.professionalProfileRoute,
               text: 'Perfil',
               icon: Icons.person_outlined,
               onPressed: () {
@@ -52,114 +49,95 @@ class Sidebar extends StatelessWidget {
                 } else {
                   navigateTo(Flurorouter.profileRoute);
                 }
-                }
+              },
-
-                // () => navigateTo(Flurorouter.profileRoute),
             ),
             MenuItem(
-              isActive: sideMenuProvider.currentPage == 
+              isActive: sideMenuProvider.currentPage == Flurorouter.professionalServicesRequestsRoute,
-                  Flurorouter.professionalServicesRequestsRoute,
               text: 'Mis solicitudes',
               icon: Icons.room_service_outlined,
-              onPressed: () => {
+              onPressed: () {
-                Provider.of<ServicesProvider>(context, listen: false)
+                Provider.of<ServicesProvider>(context, listen: false).clearServices();
-                    .clearServices(),
+                navigateTo(Flurorouter.professionalServicesRequestsRoute);
-                navigateTo(Flurorouter.professionalServicesRequestsRoute)
               },
             ),
             MenuItem(
-              isActive: sideMenuProvider.currentPage ==
+              isActive: sideMenuProvider.currentPage == Flurorouter.professionalServicesRoute,
-                  Flurorouter.professionalServicesRoute,
               text: 'Mis servicios',
-              icon: Icons.list,
+              icon: Icons.list_alt_outlined,
-              onPressed: () => {
+              onPressed: () {
-                Provider.of<ServicesProvider>(context, listen: false)
+                Provider.of<ServicesProvider>(context, listen: false).clearServices();
-                    .clearServices(),
+                navigateTo(Flurorouter.professionalServicesRoute);
-                navigateTo(Flurorouter.professionalServicesRoute)
               },
             ),
             MenuItem(
-              isActive: sideMenuProvider.currentPage ==
+              isActive: sideMenuProvider.currentPage == Flurorouter.professionalServicesHistoryRoute,
-                  Flurorouter.professionalServicesHistoryRoute,
               text: 'Historial',
               icon: Icons.restore_outlined,
-              onPressed: () => {
+              onPressed: () {
-                Provider.of<ServicesProvider>(context, listen: false)
+                Provider.of<ServicesProvider>(context, listen: false).clearServices();
-                    .clearServices(),
+                navigateTo(Flurorouter.professionalServicesHistoryRoute);
-                navigateTo(Flurorouter.professionalServicesHistoryRoute)
               },
             ),
             MenuItem(
               text: 'Calendario',
               icon: Icons.calendar_month_outlined,
-              onPressed: () =>
+              onPressed: () => navigateTo(Flurorouter.professionalCalendarRoute),
-                  navigateTo(Flurorouter.professionalCalendarRoute),
             ),
           ] else ...[
             const TextSeparator(text: 'Usuario'),
             MenuItem(
-              isActive:
+              isActive: sideMenuProvider.currentPage == Flurorouter.profileRoute,
-                  sideMenuProvider.currentPage == Flurorouter.profileRoute,
               text: 'Perfil',
               icon: Icons.person_outlined,
               onPressed: () => navigateTo(Flurorouter.profileRoute),
             ),
             MenuItem(
-              isActive:
+              isActive: sideMenuProvider.currentPage == Flurorouter.dashboardRoute,
-                  sideMenuProvider.currentPage == Flurorouter.dashboardRoute,
               text: 'Solicitar',
               icon: Icons.room_service_outlined,
               onPressed: () => navigateTo(Flurorouter.dashboardRoute),
             ),
             MenuItem(
-              isActive:
+              isActive: sideMenuProvider.currentPage == Flurorouter.userServicesRoute,
-                  sideMenuProvider.currentPage == Flurorouter.userServicesRoute,
               text: 'Mis servicios',
-              icon: Icons.list,
+              icon: Icons.list_alt_outlined,
-              onPressed: () => {
+              onPressed: () {
-                Provider.of<ServicesProvider>(context, listen: false)
+                Provider.of<ServicesProvider>(context, listen: false).clearServices();
-                    .clearServices(),
+                navigateTo(Flurorouter.userServicesRoute);
-                navigateTo(Flurorouter.userServicesRoute)
               },
             ),
             MenuItem(
-              isActive: sideMenuProvider.currentPage ==
+              isActive: sideMenuProvider.currentPage == Flurorouter.userServicesHistoryRoute,
-                  Flurorouter.userServicesHistoryRoute,
               text: 'Historial',
               icon: Icons.restore_outlined,
-              onPressed: () => {
+              onPressed: () {
-                Provider.of<ServicesProvider>(context, listen: false)
+                Provider.of<ServicesProvider>(context, listen: false).clearServices();
-                    .clearServices(),
+                navigateTo(Flurorouter.userServicesHistoryRoute);
-                navigateTo(Flurorouter.userServicesHistoryRoute)
               },
             ),
             MenuItem(
-              isActive:
+              isActive: sideMenuProvider.currentPage == Flurorouter.supportRoute,
-                  sideMenuProvider.currentPage == Flurorouter.supportRoute,
               text: 'Soporte',
               icon: Icons.support_agent_outlined,
               onPressed: () => navigateTo(Flurorouter.supportRoute),
             ),
           ],
-          Material(
-            color: Colors.blueAccent,
-            child: InkWell(
-              onTap: () {
-                if (authProvider.user?.picture == '' ||
-                    authProvider.user?.city == '' ||
-                    authProvider.user?.name == null ||
-                    authProvider.user?.name == '' ||
-                    authProvider.user?.email == '') {
-                  NotificationsService.showSnackBarError(
-                      'Primero completa tu perfil');
-                  navigateTo(Flurorouter.profileRoute);
 
+          const SizedBox(height: 16),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: MouseRegion(
+              cursor: SystemMouseCursors.click,
+              child: GestureDetector(
+                onTap: () {
+                  if (authProvider.user?.name == null ||
+                      authProvider.user?.name == '') {
+                    NotificationsService.showSnackBarError('Primero completa tu perfil');
+                    navigateTo(Flurorouter.profileRoute);
                     return;
                   }
-
                   if (authProvider.user?.proState == ProState.active) {
                     professionalProvider.toggleProMode();
-
                     if (professionalProvider.isProModeActive) {
                       navigateTo(Flurorouter.professionalServicesRequestsRoute);
                     } else {
@@ -169,29 +147,47 @@ class Sidebar extends StatelessWidget {
                     navigateTo(Flurorouter.requestProfessionalRoute);
                   }
                 },
-              child: Padding(
+                child: Container(
-                padding: const EdgeInsets.symmetric(
+                  padding: const EdgeInsets.symmetric(vertical: 11),
-                  horizontal: 30,
+                  decoration: BoxDecoration(
-                  vertical: 10,
+                    gradient: const LinearGradient(
+                      colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
                     ),
-                child: MouseRegion(
+                    borderRadius: BorderRadius.circular(10),
-                  cursor: SystemMouseCursors.click,
+                  ),
-                  child: Text(
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Icon(
+                        professionalProvider.isProModeActive
+                            ? Icons.person_outlined
+                            : Icons.work_outline,
+                        color: Colors.white,
+                        size: 16,
+                      ),
+                      const SizedBox(width: 8),
+                      Text(
                         'Modo ${professionalProvider.isProModeActive ? 'Usuario' : 'Profesional'}',
-                    style: GoogleFonts.roboto(
+                        style: const TextStyle(
-                        color: Colors.white.withOpacity(0.8)),
+                          color: Colors.white,
+                          fontSize: 13,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                    ],
                   ),
                 ),
               ),
             ),
           ),
-          const SizedBox(height: 50),
+          const SizedBox(height: 24),
-          const TextSeparator(text: 'Salir'),
+          const TextSeparator(text: 'Sesion'),
           MenuItem(
-            text: 'Cerrar sesión',
+            text: 'Cerrar sesion',
             icon: Icons.exit_to_app_outlined,
             onPressed: () => authProvider.logout(),
           ),
+          const SizedBox(height: 20),
         ],
       ),
     );
@@ -199,15 +195,18 @@ class Sidebar extends StatelessWidget {
 
   BoxDecoration buildBoxDecoration() => const BoxDecoration(
         gradient: LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
           colors: [
-            Color(0xff092044),
+            Color(0xFF0D1B3E),
-            Color(0xff092042),
+            Color(0xFF0A1628),
           ],
         ),
         boxShadow: [
           BoxShadow(
-            color: Colors.black26,
+            color: Colors.black38,
-            blurRadius: 10,
+            blurRadius: 12,
+            offset: Offset(2, 0),
           ),
         ],
       );

lib/ui/shared/widgets/logo.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
 
 class Logo extends StatelessWidget {
   const Logo({super.key});
@@ -7,21 +6,38 @@ class Logo extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: EdgeInsets.only(top: 30),
+      padding: const EdgeInsets.symmetric(vertical: 28, horizontal: 20),
-      child: Row(
+      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Image.asset('logo.png', width: 50, height: 50),
+          Container(
-          SizedBox(width: 8),
+            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
-          Text(
+            decoration: BoxDecoration(
-            'Prosapp',
-            style: GoogleFonts.montserratAlternates(
-              fontSize: 20,
-              fontWeight: FontWeight.w200,
               color: Colors.white,
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: Image.network(
+              'https://www.prosapp.co/img/logo_prosapp.png',
+              height: 32,
+              fit: BoxFit.contain,
+              errorBuilder: (_, __, ___) => const Text(
+                'ProsApp',
+                style: TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.bold,
+                  color: Color(0xFF42A4EF),
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(height: 8),
+          const Text(
+            'Conecta con profesionales',
+            style: TextStyle(
+              color: Color(0xFF8BAFD4),
+              fontSize: 10,
+              letterSpacing: 0.3,
             ),
           ),
-          SizedBox(width: 10),
         ],
       ),
     );

lib/ui/shared/widgets/menu_item.dart

@@ -1,5 +1,10 @@
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
+
+const _kAccent = Color(0xFF42A4EF);
+const _kTextActive = Colors.white;
+const _kTextInactive = Color(0xFF8BAFD4);
+const _kIconActive = _kAccent;
+const _kIconInactive = Color(0xFF5A7A9B);
 
 class MenuItem extends StatefulWidget {
   final String text;
@@ -24,48 +29,57 @@ class _MenuItemState extends State<MenuItem> {
 
   @override
   Widget build(BuildContext context) {
-    return AnimatedContainer(
+    final active = widget.isActive;
-      duration: const Duration(milliseconds: 300),
+    final highlight = active || isHovered;
-      color: isHovered
+
-          ? Colors.white.withOpacity(0.1)
+    return MouseRegion(
-          : widget.isActive
+      cursor: active ? SystemMouseCursors.basic : SystemMouseCursors.click,
-              ? Colors.white.withOpacity(0.1)
-              : Colors.transparent,
-      child: Material(
-        color: Colors.transparent,
-        child: InkWell(
-          onTap: widget.isActive ? null : () => widget.onPressed(),
-          child: Padding(
-            padding: const EdgeInsets.symmetric(
-              horizontal: 30,
-              vertical: 10,
-            ),
-            child: MouseRegion(
-              cursor: widget.isActive
-                  ? SystemMouseCursors.basic
-                  : SystemMouseCursors.click,
       onEnter: (_) => setState(() => isHovered = true),
       onExit: (_) => setState(() => isHovered = false),
+      child: GestureDetector(
+        onTap: active ? null : () => widget.onPressed(),
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 200),
+          margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
+          decoration: BoxDecoration(
+            color: highlight
+                ? const Color(0xFF42A4EF).withOpacity(0.12)
+                : Colors.transparent,
+            borderRadius: BorderRadius.circular(10),
+          ),
           child: Row(
-                crossAxisAlignment: CrossAxisAlignment.center,
             children: [
+              AnimatedContainer(
+                duration: const Duration(milliseconds: 200),
+                width: 3,
+                height: 36,
+                decoration: BoxDecoration(
+                  color: active ? _kAccent : Colors.transparent,
+                  borderRadius: const BorderRadius.only(
+                    topRight: Radius.circular(3),
+                    bottomRight: Radius.circular(3),
+                  ),
+                ),
+              ),
+              const SizedBox(width: 12),
               Icon(
                 widget.icon,
-                    color: Colors.white.withOpacity(0.3),
+                color: active ? _kIconActive : _kIconInactive,
+                size: 20,
               ),
               const SizedBox(width: 10),
               Text(
                 widget.text,
-                    style: GoogleFonts.roboto(
+                style: TextStyle(
-                      color: Colors.white.withOpacity(0.8),
+                  color: active ? _kTextActive : _kTextInactive,
+                  fontSize: 13,
+                  fontWeight: active ? FontWeight.w600 : FontWeight.w400,
                 ),
               ),
             ],
           ),
         ),
       ),
-        ),
-      ),
     );
   }
 }

lib/ui/shared/widgets/text_separator.dart

@@ -1,20 +1,29 @@
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
 
 class TextSeparator extends StatelessWidget {
   final String text;
-
   const TextSeparator({super.key, required this.text});
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Padding(
-      padding: EdgeInsets.symmetric(horizontal: 20),
+      padding: const EdgeInsets.fromLTRB(20, 16, 20, 4),
-      margin: EdgeInsets.only(bottom: 5),
+      child: Row(
-      child: Text(
+        children: [
-        text,
+          Text(
-        style: GoogleFonts.roboto(
+            text.toUpperCase(),
-            color: Colors.white.withOpacity(0.3), fontSize: 12),
+            style: const TextStyle(
+              color: Color(0xFF4A6F8A),
+              fontSize: 10,
+              fontWeight: FontWeight.w600,
+              letterSpacing: 1.2,
+            ),
+          ),
+          const SizedBox(width: 8),
+          const Expanded(
+            child: Divider(color: Color(0xFF1E3A52), thickness: 1, height: 1),
+          ),
+        ],
       ),
     );
   }