drawer providers

packages/simplex_app/lib/providers/drawer_providers.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/cupertino.dart';
+
+class DrawerProvider extends ChangeNotifier {
+  int _currentIndex = 0;
+
+  int get currentIndex => _currentIndex;
+
+  set currentIndex(int value) {
+    _currentIndex = value;
+    notifyListeners();
+  }
+
+  // toggle drawer
+  TickerFuture toggle(
+      AnimationController? animationController) {
+    
+    return animationController!.isDismissed
+        ? animationController.forward()
+        : animationController.reverse();
+  }
+}

packages/simplex_app/lib/views/home/drawer.dart

@@ -1,11 +1,16 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:provider/provider.dart';
+import 'package:simplex_chat/constants.dart';
+import 'package:simplex_chat/providers/drawer_providers.dart';
 
 class MyDrawer extends StatelessWidget {
-  const MyDrawer({Key? key}) : super(key: key);
+  final AnimationController? animationController;
+  const MyDrawer({Key? key, this.animationController}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    final _drawerProviders = Provider.of<DrawerProvider>(context);
     return SizedBox(
       width: MediaQuery.of(context).size.width * 0.82,
       child: Material(
@@ -21,22 +26,97 @@ class MyDrawer extends StatelessWidget {
               ),
               const Divider(height: 50.0),
               ListTile(
-                leading: const Icon(Icons.contact_phone),
+                tileColor: _drawerProviders.currentIndex == 0
-                title: const Text('Your contacts'),
+                    ? kPrimaryColor
-                subtitle: const Text('Start a conversation right away!'),
+                    : Colors.transparent,
-                onTap: () {},
+                leading: Icon(
+                  Icons.contact_phone,
+                  color: _drawerProviders.currentIndex == 0
+                      ? Colors.white
+                      : Colors.grey,
+                ),
+                title: Text(
+                  'Your contacts',
+                  style: TextStyle(
+                    color: _drawerProviders.currentIndex == 0
+                        ? Colors.white
+                        : Colors.black,
+                  ),
+                ),
+                subtitle: Text(
+                  'Start a conversation right away!',
+                  style: TextStyle(
+                    color: _drawerProviders.currentIndex == 0
+                        ? Colors.white
+                        : Colors.grey,
+                  ),
+                ),
+                onTap: () {
+                  _drawerProviders.currentIndex = 0;
+                  _drawerProviders.toggle(animationController);
+                },
               ),
               ListTile(
-                leading: const Icon(Icons.insert_invitation),
+                tileColor: _drawerProviders.currentIndex == 1
-                title: const Text('Invitations'),
+                    ? kPrimaryColor
-                subtitle: const Text('Increase your contact circle!'),
+                    : Colors.transparent,
-                onTap: () {},
+                leading: Icon(
+                  Icons.insert_invitation,
+                  color: _drawerProviders.currentIndex == 1
+                      ? Colors.white
+                      : Colors.grey,
+                ),
+                title: Text(
+                  'Invitations',
+                  style: TextStyle(
+                    color: _drawerProviders.currentIndex == 1
+                        ? Colors.white
+                        : Colors.black,
+                  ),
+                ),
+                subtitle: Text(
+                  'Increase your contact circle!',
+                  style: TextStyle(
+                    color: _drawerProviders.currentIndex == 1
+                        ? Colors.white
+                        : Colors.grey,
+                  ),
+                ),
+                onTap: () {
+                  _drawerProviders.currentIndex = 1;
+                  _drawerProviders.toggle(animationController);
+                },
               ),
               ListTile(
-                leading: const Icon(Icons.group),
+                tileColor: _drawerProviders.currentIndex == 2
-                title: const Text('Your groups'),
+                    ? kPrimaryColor
-                subtitle: const Text('Get in touch with numbers!'),
+                    : Colors.transparent,
-                onTap: () {},
+                leading: Icon(
+                  Icons.group,
+                  color: _drawerProviders.currentIndex == 2
+                      ? Colors.white
+                      : Colors.grey,
+                ),
+                title: Text(
+                  'Your groups',
+                  style: TextStyle(
+                    color: _drawerProviders.currentIndex == 2
+                        ? Colors.white
+                        : Colors.black,
+                  ),
+                ),
+                subtitle: Text(
+                  'Get in touch with numbers!',
+                  style: TextStyle(
+                    color: _drawerProviders.currentIndex == 2
+                        ? Colors.white
+                        : Colors.grey,
+                  ),
+                ),
+                onTap: () {
+                  _drawerProviders.currentIndex = 2;
+                  _drawerProviders.toggle(animationController);
+                },
               ),
               const Spacer(),
               ListTile(

packages/simplex_app/lib/views/home/home_view.dart

@@ -1,9 +1,13 @@
 import 'dart:math' as math;
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:provider/provider.dart';
+import 'package:simplex_chat/providers/drawer_providers.dart';
+import 'package:simplex_chat/views/group/group_view.dart';
 
 import 'package:simplex_chat/views/home/drawer.dart';
 import 'package:simplex_chat/views/home/home_view_widget.dart';
+import 'package:simplex_chat/views/invitations/invitation_view.dart';
 
 class HomeView extends StatefulWidget {
   final double? maxSlide;
@@ -20,9 +24,12 @@ class _HomeViewState extends State<HomeView> with TickerProviderStateMixin {
   AnimationController? animationController;
   bool? _canBeDragged;
 
-  void toggle() => animationController!.isDismissed
+  // views
-      ? animationController!.forward()
+  final List<Widget> _views = [
-      : animationController!.reverse();
+    const HomeViewWidget(),
+    const Invitations(),
+    const GroupView(),
+  ];
 
   @override
   void initState() {
@@ -33,6 +40,7 @@ class _HomeViewState extends State<HomeView> with TickerProviderStateMixin {
 
   @override
   Widget build(BuildContext context) {
+    final _drawerProviders = Provider.of<DrawerProvider>(context);
     return GestureDetector(
       onHorizontalDragStart: _onDragStart,
       onHorizontalDragUpdate: _onDragUpdate,
@@ -55,7 +63,9 @@ class _HomeViewState extends State<HomeView> with TickerProviderStateMixin {
                         ..rotateY(
                             math.pi / 2 * (1 - animationController!.value)),
                       alignment: Alignment.centerRight,
-                      child: const MyDrawer(),
+                      child: MyDrawer(
+                        animationController: animationController,
+                      ),
                     ),
                   ),
                   Transform.translate(
@@ -66,14 +76,16 @@ class _HomeViewState extends State<HomeView> with TickerProviderStateMixin {
                           ..setEntry(3, 2, 0.001)
                           ..rotateY(-math.pi / 2 * animationController!.value),
                         alignment: Alignment.centerLeft,
-                        child: const HomeViewWidget()),
+                        child: _views[_drawerProviders.currentIndex]),
                   ),
                   Positioned(
                     top: MediaQuery.of(context).padding.top,
                     left: MediaQuery.of(context).size.width * 0.03 +
                         animationController!.value * widget.maxSlide!,
                     child: InkWell(
-                      onTap: toggle,
+                      onTap: () {
+                        _drawerProviders.toggle(animationController);
+                      },
                       child: Padding(
                         padding: const EdgeInsets.all(8.0),
                         child: SvgPicture.asset(

packages/simplex_app/lib/views/home/home_view_widget.dart

@@ -5,6 +5,7 @@ import 'package:simplex_chat/animations/bottom_animation.dart';
 import 'package:simplex_chat/app_routes.dart';
 import 'package:simplex_chat/constants.dart';
 import 'package:simplex_chat/model/contact.dart';
+import 'package:simplex_chat/model/group.dart';
 import 'package:simplex_chat/views/conversation/conversation_view.dart';
 
 class HomeViewWidget extends StatefulWidget {
@@ -22,7 +23,6 @@ class _HomeViewWidgetState extends State<HomeViewWidget> {
   final List<String> _options = [
     'Add contact',
     'Scan invitation',
-    'New group',
   ];
 
   // delete a contact
@@ -76,7 +76,18 @@ class _HomeViewWidgetState extends State<HomeViewWidget> {
                     ),
                   ),
                 ),
-                const SizedBox(height: 10.0),
+                const SizedBox(height: 15.0),
+                Row(
+                  children: const [
+                    Icon(Icons.chat, color: kPrimaryColor),
+                    SizedBox(width: 8.0),
+                    Text(
+                      'Chats',
+                      style: kHeadingStyle,
+                    )
+                  ],
+                ),
+                const SizedBox(height: 5.0),
                 _contactsList.isEmpty
                     ? SizedBox(
                         height: MediaQuery.of(context).size.height * 0.7,
@@ -137,14 +148,12 @@ class _HomeViewWidgetState extends State<HomeViewWidget> {
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(5.0),
         ),
-        offset: const Offset(-10, -180),
+        offset: const Offset(-10, -120),
         onSelected: (value) {
           if (value == _options[0]) {
             Navigator.pushNamed(context, AppRoutes.addContact);
-          } else if (value == _options[1]) {
-            Navigator.pushNamed(context, AppRoutes.scanInvitation);
           } else {
-            Navigator.pushNamed(context, AppRoutes.addGroup);
+            Navigator.pushNamed(context, AppRoutes.scanInvitation);
           }
         },
         itemBuilder: (context) => _options