#347 Update Sidebar + Navbar to match designs

[sandrina-p]

Following and Closes #347

I've updated Sidebar and Navbar layout to match the design on #347.

• Now the layout is fluid (100% window width), but the Dashboard itself has a max-width, so isn't too large.
• Sidebar "is-active" logic isn't working, so any tab is never active, but the design for the class is done. BTW, how can I debug easily a vue component? On react it's easy as { console.log('x')} but on Vue I couldn't make it work, neither using breakpoints... What's the trick?
• I've noticed the designs don't have Pay Group link, so to not erase it, I've kept it on navbar until we figure out a better way.
• The "Create Group" link was added to homepage "Welcome to GroupIncome" when logged for the first time.

Some parts of the layout don't match exactly the design (typography sizes / colors). It only uses bulma classes for now. I believe we can still iterate a lot on the navigation (sidebar + navbar) and elements hierarchy, but let's keep that for another iteration when we have #387 merged. I prefer to have small but fast iterations, what do you think?

[taoeffect]

Sidebar "is-active" logic isn't working, so any tab is never active, but the design for the class is done

Should this perhaps be fixed before merging?

BTW, how can I debug easily a vue component? On react it's easy as { console.log('x')} but on Vue I couldn't make it work, neither using breakpoints... What's the trick?

Sorry, don't understand. What are you trying to do? We can do a video chat if you'd like, and/or ask @hubudibu for help.

but let's keep that for another iteration when we have #387 merged. I prefer to have small but fast iterations, what do you think?

Should I review and merge this PR before #387 or after #387?

[sandrina-p]

Both PR are independent, but if it this one goes after it gets cleaner.

[hubudibu]

I'm also not sure what you miss from debugging, but from the top of my head

• if you haven't already, install vue devtools https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en to inspect components and their data/methods
• you can console.log in the script part
• you can display any local variable (data, computed) in the template between {{ moustaches }}

the template does'nt get translated to JS like the JSX in react, so you can't write plain js in the template tags, that is true. maybe if you give an example on what you would console.log I could help more

[taoeffect]

merge conflict needs fixing

[sandrina-p]

Sidebar "is-active" logic isn't working, so any tab is never active, but the design for the class is done
Should this perhaps be fixed before merging?

Fixed @taoeffect 😊