diff --git a/lib/providers/navigation.dart b/lib/providers/navigation.dart index ec8e037..2a4e3a2 100644 --- a/lib/providers/navigation.dart +++ b/lib/providers/navigation.dart @@ -60,11 +60,6 @@ class NavigationProvider extends ChangeNotifier { screen: 'chat', label: 'screenChat', ), - AppNavDestination( - icon: Icon(Symbols.account_circle, weight: 400, opticalSize: 20), - screen: 'account', - label: 'screenAccount', - ), AppNavDestination( icon: Icon(Symbols.group, weight: 400, opticalSize: 20), screen: 'realm', diff --git a/lib/router.dart b/lib/router.dart index e8a8926..2e6b512 100644 --- a/lib/router.dart +++ b/lib/router.dart @@ -127,102 +127,111 @@ final _appRoutes = [ ), ], ), - GoRoute( - path: '/account', - name: 'account', - builder: (context, state) => const AccountScreen(), + ShellRoute( + builder: (context, state, child) => ResponsiveScaffold( + aside: const AccountScreen(), + child: child, + ), routes: [ GoRoute( - path: '/punishments', - name: 'accountPunishments', - builder: (context, state) => const PunishmentsScreen(), - ), - GoRoute( - path: '/programs', - name: 'accountProgram', - builder: (context, state) => const AccountProgramScreen(), - ), - GoRoute( - path: '/contacts', - name: 'accountContactMethods', - builder: (context, state) => const AccountContactMethod(), - ), - GoRoute( - path: '/events', - name: 'accountActionEvents', - builder: (context, state) => const ActionEventScreen(), - ), - GoRoute( - path: '/tickets', - name: 'accountAuthTickets', - builder: (context, state) => const AccountAuthTicket(), - ), - GoRoute( - path: '/badges', - name: 'accountBadges', - builder: (context, state) => const AccountBadgesScreen(), - ), - GoRoute( - path: '/wallet', - name: 'accountWallet', - builder: (context, state) => const WalletScreen(), - ), - GoRoute( - path: '/keypairs', - name: 'accountKeyPairs', - builder: (context, state) => const KeyPairScreen(), - ), - GoRoute( - path: '/settings', - name: 'accountSettings', - builder: (context, state) => AccountSettingsScreen(), - routes: [ - GoRoute( - path: '/notify', - name: 'accountSettingsNotify', - builder: (context, state) => const AccountNotifyPrefsScreen(), - ), - GoRoute( - path: '/auth', - name: 'accountSettingsSecurity', - builder: (context, state) => const AccountSecurityPrefsScreen(), - ), - ], - ), - GoRoute( - path: '/settings/factors', - name: 'factorSettings', - builder: (context, state) => FactorSettingsScreen(), - ), - GoRoute( - path: '/profile/edit', - name: 'accountProfileEdit', - builder: (context, state) => ProfileEditScreen(), - ), - GoRoute( - path: '/publishers', - name: 'accountPublishers', - builder: (context, state) => PublisherScreen(), - ), - GoRoute( - path: '/publishers/new', - name: 'accountPublisherNew', - builder: (context, state) => AccountPublisherNewScreen(), - ), - GoRoute( - path: '/publishers/edit/:name', - name: 'accountPublisherEdit', - builder: (context, state) => AccountPublisherEditScreen( - name: state.pathParameters['name']!, - ), - ), - GoRoute( - path: '/profile/:name', - name: 'accountProfilePage', - pageBuilder: (context, state) => NoTransitionPage( - child: UserScreen(name: state.pathParameters['name']!), - ), - ), + path: '/account', + name: 'account', + builder: (context, state) => + const ResponsiveScaffoldLanding(child: AccountScreen()), + routes: [ + GoRoute( + path: '/punishments', + name: 'accountPunishments', + builder: (context, state) => const PunishmentsScreen(), + ), + GoRoute( + path: '/programs', + name: 'accountProgram', + builder: (context, state) => const AccountProgramScreen(), + ), + GoRoute( + path: '/contacts', + name: 'accountContactMethods', + builder: (context, state) => const AccountContactMethod(), + ), + GoRoute( + path: '/events', + name: 'accountActionEvents', + builder: (context, state) => const ActionEventScreen(), + ), + GoRoute( + path: '/tickets', + name: 'accountAuthTickets', + builder: (context, state) => const AccountAuthTicket(), + ), + GoRoute( + path: '/badges', + name: 'accountBadges', + builder: (context, state) => const AccountBadgesScreen(), + ), + GoRoute( + path: '/wallet', + name: 'accountWallet', + builder: (context, state) => const WalletScreen(), + ), + GoRoute( + path: '/keypairs', + name: 'accountKeyPairs', + builder: (context, state) => const KeyPairScreen(), + ), + GoRoute( + path: '/settings', + name: 'accountSettings', + builder: (context, state) => AccountSettingsScreen(), + routes: [ + GoRoute( + path: '/notify', + name: 'accountSettingsNotify', + builder: (context, state) => const AccountNotifyPrefsScreen(), + ), + GoRoute( + path: '/auth', + name: 'accountSettingsSecurity', + builder: (context, state) => + const AccountSecurityPrefsScreen(), + ), + ], + ), + GoRoute( + path: '/settings/factors', + name: 'factorSettings', + builder: (context, state) => FactorSettingsScreen(), + ), + GoRoute( + path: '/profile/edit', + name: 'accountProfileEdit', + builder: (context, state) => ProfileEditScreen(), + ), + GoRoute( + path: '/publishers', + name: 'accountPublishers', + builder: (context, state) => PublisherScreen(), + ), + GoRoute( + path: '/publishers/new', + name: 'accountPublisherNew', + builder: (context, state) => AccountPublisherNewScreen(), + ), + GoRoute( + path: '/publishers/edit/:name', + name: 'accountPublisherEdit', + builder: (context, state) => AccountPublisherEditScreen( + name: state.pathParameters['name']!, + ), + ), + GoRoute( + path: '/profile/:name', + name: 'accountProfilePage', + pageBuilder: (context, state) => NoTransitionPage( + child: UserScreen(name: state.pathParameters['name']!), + ), + ), + ]), ], ), GoRoute( diff --git a/lib/screens/account.dart b/lib/screens/account.dart index 8fa83e1..31dfba0 100644 --- a/lib/screens/account.dart +++ b/lib/screens/account.dart @@ -141,15 +141,6 @@ class AccountScreen extends StatelessWidget { ], ) : null, - actions: [ - IconButton( - icon: const Icon(Symbols.settings, fill: 1), - onPressed: () { - GoRouter.of(context).pushNamed('settings'); - }, - ), - const Gap(8), - ], ), body: SingleChildScrollView( child: ua.isAuthorized diff --git a/lib/widgets/navigation/app_rail_navigation.dart b/lib/widgets/navigation/app_rail_navigation.dart index c3c7a55..e11cf51 100644 --- a/lib/widgets/navigation/app_rail_navigation.dart +++ b/lib/widgets/navigation/app_rail_navigation.dart @@ -1,10 +1,12 @@ import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; +import 'package:gap/gap.dart'; import 'package:go_router/go_router.dart'; import 'package:material_symbols_icons/symbols.dart'; import 'package:provider/provider.dart'; -import 'package:styled_widget/styled_widget.dart'; import 'package:surface/providers/navigation.dart'; +import 'package:surface/providers/userinfo.dart'; +import 'package:surface/widgets/account/account_image.dart'; class AppRailNavigation extends StatefulWidget { const AppRailNavigation({super.key}); @@ -18,43 +20,59 @@ class _AppRailNavigationState extends State { void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) { - context.read().autoDetectIndex(GoRouter.maybeOf(context)); + context + .read() + .autoDetectIndex(GoRouter.maybeOf(context)); }); } @override Widget build(BuildContext context) { + final ua = context.watch(); final nav = context.watch(); return ListenableBuilder( listenable: nav, builder: (context, _) { - final destinations = nav.destinations.where((ele) => ele.isPinned).toList(); + final destinations = nav.destinations.toList(); return SizedBox( width: 80, child: NavigationRail( - selectedIndex: - nav.currentIndex != null && nav.currentIndex! < nav.pinnedDestinationCount ? nav.currentIndex : null, + labelType: NavigationRailLabelType.selected, + backgroundColor: Theme.of(context) + .colorScheme + .surfaceContainerLow + .withOpacity(0.5), + selectedIndex: nav.currentIndex != null && + nav.currentIndex! < nav.destinations.length + ? nav.currentIndex + : null, destinations: [ - ...destinations.where((ele) => ele.isPinned).map((ele) { + ...destinations.map((ele) { return NavigationRailDestination( icon: ele.icon, label: Text(ele.label).tr(), ); }), ], + leading: const Gap(4), trailing: Expanded( child: Align( alignment: Alignment.bottomCenter, - child: StyledWidget( - IconButton( - icon: const Icon(Symbols.menu), - onPressed: () { - Scaffold.of(context).openDrawer(); + child: Padding( + padding: EdgeInsets.only(bottom: 24), + child: GestureDetector( + child: AccountImage( + content: ua.user?.avatar, + fallbackWidget: + ua.isAuthorized ? null : const Icon(Symbols.login), + ), + onTap: () { + GoRouter.of(context).goNamed('account'); }, ), - ).padding(bottom: 16), + ), ), ), onDestinationSelected: (idx) { diff --git a/lib/widgets/navigation/app_scaffold.dart b/lib/widgets/navigation/app_scaffold.dart index 7208f62..4f87552 100644 --- a/lib/widgets/navigation/app_scaffold.dart +++ b/lib/widgets/navigation/app_scaffold.dart @@ -13,7 +13,6 @@ import 'package:surface/providers/navigation.dart'; import 'package:surface/widgets/connection_indicator.dart'; import 'package:surface/widgets/navigation/app_background.dart'; import 'package:surface/widgets/navigation/app_bottom_navigation.dart'; -import 'package:surface/widgets/navigation/app_drawer_navigation.dart'; import 'package:surface/widgets/navigation/app_rail_navigation.dart'; import 'package:surface/widgets/notify_indicator.dart'; @@ -111,7 +110,6 @@ class AppRootScaffold extends StatelessWidget { final devicePixelRatio = MediaQuery.of(context).devicePixelRatio; final isCollapseDrawer = cfg.drawerIsCollapsed; - final isExpandedDrawer = cfg.drawerIsExpanded; final routeName = GoRouter.of(context) .routerDelegate @@ -132,19 +130,7 @@ class AppRootScaffold extends StatelessWidget { ? body : Row( children: [ - Container( - decoration: BoxDecoration( - border: Border( - right: BorderSide( - color: Theme.of(context).dividerColor, - width: 1 / devicePixelRatio, - ), - ), - ), - child: isExpandedDrawer - ? AppNavigationDrawer(elevation: 0) - : AppRailNavigation(), - ), + AppRailNavigation(), Expanded(child: body), ], ); @@ -232,10 +218,57 @@ class AppRootScaffold extends StatelessWidget { ), ], ), - drawer: !isExpandedDrawer ? AppNavigationDrawer() : null, drawerEdgeDragWidth: isPopable ? 0 : null, bottomNavigationBar: isShowBottomNavigation ? AppBottomNavigationBar() : null, ); } } + +class ResponsiveScaffold extends StatelessWidget { + final Widget aside; + final Widget? child; + const ResponsiveScaffold( + {super.key, required this.aside, required this.child}); + + @override + Widget build(BuildContext context) { + if (ResponsiveBreakpoints.of(context).largerOrEqualTo(TABLET)) { + return Row( + children: [ + Flexible( + flex: 1, + child: aside, + ), + VerticalDivider(width: 1), + if (child != null && child != aside) + Flexible(flex: 2, child: child!) + else + const Flexible( + flex: 2, + child: ResponsiveScaffoldLanding(child: null), + ), + ], + ); + } + + return child ?? aside; + } +} + +class ResponsiveScaffoldLanding extends StatelessWidget { + final Widget? child; + const ResponsiveScaffoldLanding({super.key, required this.child}); + + @override + Widget build(BuildContext context) { + if (ResponsiveBreakpoints.of(context).largerOrEqualTo(TABLET) || + child == null) { + return AppScaffold( + appBar: AppBar(), + body: const SizedBox.shrink(), + ); + } + return child!; + } +}