add hamburger menu and keybindings modal about cs-playground-react HOT 9 CLOSED

Is this something you would be interested in taking on? No worries if not, but thought I'd ask before I jumped in! If so, the latest code is on the staging branch, not master, so you'd have to pull that down.
@no-stack-dub-sack Yes, i like to take this up.

from cs-playground-react.

@no-stack-dub-sack I'm wondering I don't see current share link button as mentioned below.

I would love to add a hamburger menu in place of the current share link button:

Is this the right place to add the hamburger menu. I feel we should have one hamburger menu on top left corner where there is Menu currently. Inside that we can have other things as you mentioned plus the menu itself we can have inside that. What do you suggest.

from cs-playground-react.

(for example, did you know you could change themes CMD/CTRL+ALT+{ OR }?).

@no-stack-dub-sack No, I was not knowing this. There are so many themes i can choose from. Simply awesome!

from cs-playground-react.

@mansisce Glad you like the themes! And this is a perfect example of why we need this feature 😄

If you don't see the share button, it's probably because you need to check out and pull down the staging branch (the master branch does not reflect the current deployment on https://cs-playground-react.surge.sh but it is behind the staging branch by several commits, most of the changes on the staging branch are deployed at https://questionable-number.surge.sh which is just a test deployment to test out new changes).

I'm open to suggestions about where the menu goes, but if we put it there, I'd want to leave the share button where it is, meaning the only item in the hamburger menu for the time being would be the key bindings modal button. Which is fine, we can add more to it later, when more items become available.

The main "Contents" menu, I think should remain where it is, rather than inside the hamburger menu, otherwise, that space would be very empty when the menu was completely closed.

Maybe before the logic actually gets implemented, you can post a screen shot of what it would look like the way you are currently picturing it, and we can decide from there. What do you think?

Thanks again for your help!

from cs-playground-react.

@no-stack-dub-sack I am going with your suggestion as of now. Please find the rough screenshot attached. Let me know if that is fine with you.
Note: This is WIP screenshot.

from cs-playground-react.

@mansisce that's perfect! let's use the Menu icon component from React feather for the hamburger icon, and instead of a bulleted list, lets match the style of the sidebar menu a bit more and just do something closer to this:

I know you said this is just a rough idea anyway, but just thought I'd show you what I was thinking - this is actually the code from the main menu, just modified with the browser's dev tools to hide the trash can icons and to center the text. I wonder if we can find a way to make the code in the renderMenuItem method from MenuMap.js reusable for this purpose? (that could come later though)

Let me know how you make out! Sorry there's such a delay between our communications, we must be in different time zones, though if you reach me on Gitter I may be able to communicate during work when you're usually online. Do you use Gitter at all? If so, we might be able to shorten the feedback loop so we don't have to slow things down...

from cs-playground-react.

@mansisce also, just so you know, I'm going on holiday starting this Friday, and I won't be back until the 26th, so I probably won't be around as much, but I will do my best to check in on this when I can. I'm really looking forward to seeing what you come up with!

from cs-playground-react.

from cs-playground-react.

@mansisce no worries at all! I've been away until now anyway, so nothing has gotten done on my end. It's yours if you still want it, but no pressure, only if you have the time and are excited about it 😄

from cs-playground-react.