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>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
c8e5d481ed
commit
77f44ac43a
+102
-103
@@ -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,169 +27,167 @@ 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:
|
||||
sideMenuProvider.currentPage == Flurorouter.profileRoute ||
|
||||
sideMenuProvider.currentPage ==
|
||||
Flurorouter.professionalProfileRoute,
|
||||
text: 'Perfil',
|
||||
icon: Icons.person_outlined,
|
||||
onPressed: () {
|
||||
if (professionalProvider.isProModeActive) {
|
||||
navigateTo(Flurorouter.professionalProfileRoute);
|
||||
} else {
|
||||
navigateTo(Flurorouter.profileRoute);
|
||||
}
|
||||
isActive: sideMenuProvider.currentPage == Flurorouter.profileRoute ||
|
||||
sideMenuProvider.currentPage == Flurorouter.professionalProfileRoute,
|
||||
text: 'Perfil',
|
||||
icon: Icons.person_outlined,
|
||||
onPressed: () {
|
||||
if (professionalProvider.isProModeActive) {
|
||||
navigateTo(Flurorouter.professionalProfileRoute);
|
||||
} else {
|
||||
navigateTo(Flurorouter.profileRoute);
|
||||
}
|
||||
|
||||
// () => navigateTo(Flurorouter.profileRoute),
|
||||
),
|
||||
},
|
||||
),
|
||||
MenuItem(
|
||||
isActive: sideMenuProvider.currentPage ==
|
||||
Flurorouter.professionalServicesRequestsRoute,
|
||||
isActive: sideMenuProvider.currentPage == Flurorouter.professionalServicesRequestsRoute,
|
||||
text: 'Mis solicitudes',
|
||||
icon: Icons.room_service_outlined,
|
||||
onPressed: () => {
|
||||
Provider.of<ServicesProvider>(context, listen: false)
|
||||
.clearServices(),
|
||||
navigateTo(Flurorouter.professionalServicesRequestsRoute)
|
||||
onPressed: () {
|
||||
Provider.of<ServicesProvider>(context, listen: false).clearServices();
|
||||
navigateTo(Flurorouter.professionalServicesRequestsRoute);
|
||||
},
|
||||
),
|
||||
MenuItem(
|
||||
isActive: sideMenuProvider.currentPage ==
|
||||
Flurorouter.professionalServicesRoute,
|
||||
isActive: sideMenuProvider.currentPage == Flurorouter.professionalServicesRoute,
|
||||
text: 'Mis servicios',
|
||||
icon: Icons.list,
|
||||
onPressed: () => {
|
||||
Provider.of<ServicesProvider>(context, listen: false)
|
||||
.clearServices(),
|
||||
navigateTo(Flurorouter.professionalServicesRoute)
|
||||
icon: Icons.list_alt_outlined,
|
||||
onPressed: () {
|
||||
Provider.of<ServicesProvider>(context, listen: false).clearServices();
|
||||
navigateTo(Flurorouter.professionalServicesRoute);
|
||||
},
|
||||
),
|
||||
MenuItem(
|
||||
isActive: sideMenuProvider.currentPage ==
|
||||
Flurorouter.professionalServicesHistoryRoute,
|
||||
isActive: sideMenuProvider.currentPage == Flurorouter.professionalServicesHistoryRoute,
|
||||
text: 'Historial',
|
||||
icon: Icons.restore_outlined,
|
||||
onPressed: () => {
|
||||
Provider.of<ServicesProvider>(context, listen: false)
|
||||
.clearServices(),
|
||||
navigateTo(Flurorouter.professionalServicesHistoryRoute)
|
||||
onPressed: () {
|
||||
Provider.of<ServicesProvider>(context, listen: false).clearServices();
|
||||
navigateTo(Flurorouter.professionalServicesHistoryRoute);
|
||||
},
|
||||
),
|
||||
MenuItem(
|
||||
text: 'Calendario',
|
||||
icon: Icons.calendar_month_outlined,
|
||||
onPressed: () =>
|
||||
navigateTo(Flurorouter.professionalCalendarRoute),
|
||||
onPressed: () => navigateTo(Flurorouter.professionalCalendarRoute),
|
||||
),
|
||||
] else ...[
|
||||
const TextSeparator(text: 'Usuario'),
|
||||
MenuItem(
|
||||
isActive:
|
||||
sideMenuProvider.currentPage == Flurorouter.profileRoute,
|
||||
isActive: sideMenuProvider.currentPage == Flurorouter.profileRoute,
|
||||
text: 'Perfil',
|
||||
icon: Icons.person_outlined,
|
||||
onPressed: () => navigateTo(Flurorouter.profileRoute),
|
||||
),
|
||||
MenuItem(
|
||||
isActive:
|
||||
sideMenuProvider.currentPage == Flurorouter.dashboardRoute,
|
||||
isActive: sideMenuProvider.currentPage == Flurorouter.dashboardRoute,
|
||||
text: 'Solicitar',
|
||||
icon: Icons.room_service_outlined,
|
||||
onPressed: () => navigateTo(Flurorouter.dashboardRoute),
|
||||
),
|
||||
MenuItem(
|
||||
isActive:
|
||||
sideMenuProvider.currentPage == Flurorouter.userServicesRoute,
|
||||
isActive: sideMenuProvider.currentPage == Flurorouter.userServicesRoute,
|
||||
text: 'Mis servicios',
|
||||
icon: Icons.list,
|
||||
onPressed: () => {
|
||||
Provider.of<ServicesProvider>(context, listen: false)
|
||||
.clearServices(),
|
||||
navigateTo(Flurorouter.userServicesRoute)
|
||||
icon: Icons.list_alt_outlined,
|
||||
onPressed: () {
|
||||
Provider.of<ServicesProvider>(context, listen: false).clearServices();
|
||||
navigateTo(Flurorouter.userServicesRoute);
|
||||
},
|
||||
),
|
||||
MenuItem(
|
||||
isActive: sideMenuProvider.currentPage ==
|
||||
Flurorouter.userServicesHistoryRoute,
|
||||
isActive: sideMenuProvider.currentPage == Flurorouter.userServicesHistoryRoute,
|
||||
text: 'Historial',
|
||||
icon: Icons.restore_outlined,
|
||||
onPressed: () => {
|
||||
Provider.of<ServicesProvider>(context, listen: false)
|
||||
.clearServices(),
|
||||
navigateTo(Flurorouter.userServicesHistoryRoute)
|
||||
onPressed: () {
|
||||
Provider.of<ServicesProvider>(context, listen: false).clearServices();
|
||||
navigateTo(Flurorouter.userServicesHistoryRoute);
|
||||
},
|
||||
),
|
||||
MenuItem(
|
||||
isActive:
|
||||
sideMenuProvider.currentPage == Flurorouter.supportRoute,
|
||||
isActive: 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);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (authProvider.user?.proState == ProState.active) {
|
||||
professionalProvider.toggleProMode();
|
||||
|
||||
if (professionalProvider.isProModeActive) {
|
||||
navigateTo(Flurorouter.professionalServicesRequestsRoute);
|
||||
} else {
|
||||
navigateTo(Flurorouter.dashboardRoute);
|
||||
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;
|
||||
}
|
||||
} else {
|
||||
navigateTo(Flurorouter.requestProfessionalRoute);
|
||||
}
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 30,
|
||||
vertical: 10,
|
||||
),
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
child: Text(
|
||||
'Modo ${professionalProvider.isProModeActive ? 'Usuario' : 'Profesional'}',
|
||||
style: GoogleFonts.roboto(
|
||||
color: Colors.white.withOpacity(0.8)),
|
||||
if (authProvider.user?.proState == ProState.active) {
|
||||
professionalProvider.toggleProMode();
|
||||
if (professionalProvider.isProModeActive) {
|
||||
navigateTo(Flurorouter.professionalServicesRequestsRoute);
|
||||
} else {
|
||||
navigateTo(Flurorouter.dashboardRoute);
|
||||
}
|
||||
} else {
|
||||
navigateTo(Flurorouter.requestProfessionalRoute);
|
||||
}
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 11),
|
||||
decoration: BoxDecoration(
|
||||
gradient: const LinearGradient(
|
||||
colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
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: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 50),
|
||||
const TextSeparator(text: 'Salir'),
|
||||
const SizedBox(height: 24),
|
||||
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(0xff092042),
|
||||
Color(0xFF0D1B3E),
|
||||
Color(0xFF0A1628),
|
||||
],
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black26,
|
||||
blurRadius: 10,
|
||||
color: Colors.black38,
|
||||
blurRadius: 12,
|
||||
offset: Offset(2, 0),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user