Side Drawer to handle Org and group navigations

[pratik0204]

Is your feature request related to a problem? Please describe.
Create a full screen side drawer UI (a slidable component ,not a container component)

Describe the solution you'd like

components/sideDrawer/sideDrawer.js

Functional component which takes in:
1.Organisation List Object.
2.Each Org object have an object of permission set for the user logged in, and an object of groups of that organisation.

components/sideDrawer/sideDrawer.stories.js

State data-

{
 org1:{
       info:{
           name: " ",
           tagline:" ",
           about:" ",
           ...org_stats(can leave for now)
            },
       groups:{
               g1:{
                    ...group data
                   },
               g2:{
                    ...group data
                  }
       },
       user_permissions:{
               ....permission_set (booleans)
       }    
   },

 org2:{
       info:{
           name: " ",
           tagline:" ",
           about:" ",
           ...org_stats(can leave for now)
            },
       groups:{
               g1:{
                    ...group data
                   },
               g2:{
                    ...group data
                  }
            },
       user_permissions:{
               ....permission_set (booleans)
           }    
   }
}

1. Loading State.

2.Initial_State:
Make 3-4 organisation with different types of permission set to check the component render.

3.Error State(show an error message, and ask to refresh)

Additional context-

Note- Make sure to check all the active links in the below picture, you can check the prototype for the same as mentioned below-
https://www.figma.com/proto/fUXz5ux7ImURWcnLTgAE1J/Untitled?node-id=24%3A7&scaling=min-zoom

1. The 4 boxes at the top which helps switching the org, for that use menu form MUI.
2. The flag button beside the boxes, takes to a new page and show the org details.. (No need to do this).

But what can be done-
In the State Data mentioned above, have track of current organisation and current_group-

{ 
    ...state_data_mentioned_above,
    active_org: "Org 1",
    active_grp: "Volunteers"
}

active_grp will help you to show the green dot as shown in above pictures.
active_org will help you filter through organisations, to show the correct org data, when we switch orgs.

3. The Create group button can be enabled disabled based on the permission set passed in the state data.

(no other variations)

If you wish to change something please do write it in comments

[pratik0204]

@rajesh6161 this issue is assigned to you.

[pratik0204]

@rajesh6161 the issue is updated, please have a look.

[naveennvrgup]

instead of orgs dict it will be a list. same applies for group 😇

[rajesh6161]

Sir what's the use of permission set here and also clicking on groups will open something or a new page.
Sir yeh groups saare dikhne hain ki only those whose he is part of?

[pratik0204]

@rajesh6161
The permission set will help to let you now, whether the user will be able to create groups or not, so based on it, you can see the button beside the groups heading, will be enabled or disabled.
You can check tht in the prototype in volunteer login.

All the groups will be visible, just make the group names clickable.

[pratik0204]

@rajesh6161 the orgs and grps will be a list, not a dictionary, I've made the changes in the issue.

[naveennvrgup]

i am taking over this issue due to few changes in the backend