import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class SideBar extends StatefulWidget {
  const SideBar({Key? key}) : super(key: key);

  @override
  State<SideBar> createState() => _SideBarState();
}

class _SideBarState extends State<SideBar> {
  bool isOpen = false;

  @override
  Widget build(BuildContext context) {
    Size scrSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple.shade300,
        systemOverlayStyle:SystemUiOverlayStyle(statusBarColor: Colors.transparent,statusBarIconBrightness: Brightness.light,),
        title: Text('AppBar'),
        leading: IconButton(
          onPressed: () {
            setState(() {
              isOpen = !isOpen;
            });
          },
          icon: Icon(Icons.menu),
        ),
      ),
      body: Stack(
        children: [
          Container(
            width: scrSize.width,
            height: scrSize.height,
            color: Colors.purple,
            child: GridView.builder(
              padding: EdgeInsets.symmetric(horizontal: 10,vertical: 10),
                gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                  childAspectRatio: 1,
                  crossAxisSpacing: 9,
                  mainAxisSpacing: 10,
                ) ,
                itemCount: 20,
                itemBuilder: (context,index){
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.white70,
                    child: Text('Grid ${index}',style: TextStyle(fontSize: 25),),
                  );
                }),
          ),
          AnimatedPositioned(
            duration: Duration(milliseconds: 500),
            left: isOpen?0:-scrSize.width*.8,
            curve: Curves.elasticOut,
            child: Container(
              width: scrSize.width*.8,
              height: scrSize.height,
              color: Colors.white,
              child:
              const Column(
                children: [
                  ListTile(
                    leading: Icon(Icons.person,size: 30,color: Colors.black87,),
                    title: Text('My Account',style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
                  ),
                  ListTile(
                    leading: Icon(Icons.settings,size: 30,color: Colors.black87),
                    title: Text('Settings',style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
                  ),
                  ListTile(
                    leading: Icon(Icons.shopping_cart,size: 30,color: Colors.black87),
                    title: Text('Cart',style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
                  ),
                  ListTile(
                    leading: Icon(Icons.table_chart_rounded,size: 30,color: Colors.black87),
                    title: Text('Terms & Conditions',style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
                  ),
                  ListTile(
                    leading: Icon(Icons.policy,size: 30,color: Colors.black87),
                    title: Text('Privacy Policy',style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
                  ),

                ],
              )
            ),
          )
        ],
      ),
    );
  }
}