feat/HIT-335 Add optional new style to sidebar

[Maximo-reliefapps]

Description

Started the implementation of the new design for the sidebars in oort.
The majority of the design has been implemented, but the top corner logo. It still uses the old layout with the top bar "on top" of the sidebar, as it is the one that has access to the options / toggle, name and filtering.
Icons are still the same ones, as the set hasn't been provided.
New setting has been added to the applications settings page to toggle the new style.

Implementation

shared-navbar & shared-layout components have been updated to accept a 'variant' Input. This input accepts 'original' and 'new' as variables, defaulting as 'original'. The 'new' variable makes the sidebar use the new design.
Another variable has been added to shared-navbar called 'bottomOptions', which is used to pass the app options (normally available from the top button) to the navbar, relevant for the new design.

Useful links

• HIT-335
• Backend

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

• Modify an application toggling the new style
• Create + delete an application

Screenshots

Checklist:

( * == Mandatory )

• * I have set myself as assignee of the pull request
• * My code follows the style guidelines of this project
• * Linting does not generate new warnings
• * I have performed a self-review of my own code
• * I have put the ticket for review, adding the oort-frontend team to the list of reviewers
• * I have commented my code, particularly in hard-to-understand areas
• * I have put JSDoc comment in all required places
• * My changes generate no new warnings
• * I have included screenshots describing my changes if relevant
• * I have selected labels in the Pull Request, according to the changes with code brings
• I have made corresponding changes to the documentation ( if required )
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

More explanation

https://www.loom.com/share/05a716d61b9744faaf51fb304c21d1e5?sid=f87cf896-582a-4f76-93ae-8ceed801b145

[unai-reliefapp]

@matheus-relief
Current state of the sidenav with the "new" variant

Last commit
feat: add sidenav variant style update on application settings save
feat: add application name display, logo and ui dividers for the sidenav with "new" variant type
feat: update application settings form in order to be in compliance with the relation between sideMenu and variant. If sideMenu is disabled, then variant value is cleaned and field is also disabled
refactor: duplicated SidenavVariantsTypes type from application.model, instead use the one set in the sidenavs.ts
fix: dashboard state dialog close when no data is set by filtering content on dialog closed subscription

Things to take in account

• If no logo is provided no default logo is displayed, just the application name on top(would adapt to same aspect ratio, has a fixed height and width)
• We still need some way to sanitize loaded blob image on DB save, guess that's part of the backend ticket for it
• We still need to implement logo loader for the application in the settings page, I added the @input in the component and update the application model in the front as a suggestion and placeholder example

About this buttons there is nothing specified in the ticket or figma

Those should have to be addressed in order to be in compliance with the figma design

[brunotannus]

Implemented upload logo feature for front-end and back-end.
Notes:

• i couldnt make it so that the logo updates only when you click save changes on settings. its outside the form and updates as soon as you select a valid file
• i couldnt make it so that the navbar updates automatically when logo changes. the page has to be refreshed
• i dont know how to check azure storage directly to make sure the file is uploaded and deleted correctly
• not sure if upload/index.ts was the appropriate place to define get and delete routes
• dont know how would i mplement sanitization of some sort for the file input
• i did not implement the collapsed state of the navbar like it is on frame 379 of figma, but i could do it in another ticket

[brunotannus]

Completed the sidenav. Last notes:

• when we have many pages the navbar is scrollable but the scrollbar looks ugly and i dont know how to change it properly
• in the design the nav items icons and labels are light gray and become white when selected (and hovered i assume). i set it up for the labels but since we use our custom icon component i couldnt set that up for the pages icons
• the collapse button on the side sometimes overlaps a dashboard button but i dont think it looks bad

tested on chrome and firefox

Untitled-application-0.webm