Add submenu to SGGS MenuItem

[bogas04]

Submenu should have items like

• [ ] Sehaj Paath (#20)
• [x] Bookmarks (#20)
• [x] Authors (#38)
• [x] Raags
  • [x] /raags with list of all raags
  • [x] /raags/:id with description of raag, and link to start ang of sggs.

[bogas04]

Raag Angs can use following CSS to be closer to an actual Saroop.

raagAngs = [1, ...];
let className = ['gurbani-text', 'gurbani-text raag-ang'][raagAngs.includes(ang) ? 1 : 0]
...
<div style={{ textAlign: 'left', padding: 20 }} className={className}>{angContent}</div>

.gurbani-text.raag-ang > div:nth-child(1) {
  font-size: 2em !important;
  display: block !important;
  text-align: center !important;
}
.gurbani-text.raag-ang > div:nth-child(2) {
  display: block !important;
  text-align: center !important;
  font-size: 1.25em !important;
}
.gurbani-text.raag-ang {
  background-color: #452f5a; /* Can be random as well */
  color: white;
}

[bogas04]

We'll have to make assumptions for Sehaj Paath.

• Only one sehaj paath should happen at a time (cool for mobile, maybe not for desktop)
• Sehaj Paath view will have a timeline of some sort and a big button to "start", which leads to lastly read ang, and as user reads, each ang can have a button (floating maybe?) to mark it as closing ang for sehaj paath ?

Since 2nd point is still confusing, we can push the release to v0.9.0

@ravjot28 any idea as to how you would want Sehaj Paath UI ?

[bogas04]

Closing as we took easier approach on Sehaj Paath for now.