Sidebar and animation to hamburger menu

[mkz212]

• added sidebar (for now without moving links!)
• hamburger menu animation

What definitely needs to be done:

• match colors
• on the Status page, after opening the menu, the width of the content does not change (on other pages it adjusts)
• inserting appropriate links (for now there are only dummies in the sidebar)
• organizing the mobile menu (but that's only at the end)

P.S: Sidebar and menu on mobile It's two separate menus. Sidebar appears on screen >= 992 px, mobile menu on smaller.

[bwp91]

There are a couple of build issues that will need fixing before this can deploy:

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
/home/runner/work/homebridge-config-ui-x/homebridge-config-ui-x/ui/src/app/shared/layout/layout.component.scss:17:100: ERROR: Unterminated string token

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
/home/runner/work/homebridge-config-ui-x/homebridge-config-ui-x/ui/src/app/shared/layout/layout.component.scss:17:100: ERROR: Unterminated string token

You should get the same result if you run npm run build from a terminal in your local github repo. Thus you can check when fixed and this no longer appears

[bwp91]

I can't be sure but the issue might be on line 52 of ui/src/app/shared/layout/layout.component.scss where there is no ; at the end of the line ?

[mkz212]

@bwp91 Thanks. One } was missing in scss in the correction I threw in total at the last minute. In any case, I point out once again that it is not 100% ready and the corrections will be! I hope that together we will somehow improve it!

[donavanbecker]

@mkz212 Ready to merge?

[mkz212]

@donavanbecker I won't be anymore! (But I would like to point out that it won't be perfect from start!)

[mkz212]

@donavanbecker Will it be in alpha 6?

[donavanbecker]

Yes

[mkz212]

@bwp91 @donavanbecker I have to leave now for a few hours. But I see it's not bad.

Can you change this? (Just on top of scss changed in this PR). This will solve responive problem:

@media (min-width: 992px) {
  .body-top-padding {
    padding-top: 0px !important;
  }
}

[mkz212]

I also see that the Hamburger menu sometimes does not quite work - shows X with the window closed. Only after clicking it jumps in as it should.

Probably after clicking on the link class collapsed is not added. Easy to fix.