Side Navigation Authentication template has inconsistent UI and should use an add-auth selection flow

[georgianastasov]

Ignite UI CLI Version

15.2.2

Framework

Angular

CLI Command

new

Node.js Version

20.11.0

Operating System

Windows

Package Manager

None

Description

There are several UI and layout issues in the generated Angular Side Navigation with Authentication template.

The authentication template has inconsistent styling and behavior compared to the regular Side Navigation templates. Some issues are visible before login, while others appear after logging in.

Observed issues include:

• The login button in the navbar has poor contrast against the blue navbar background.
• Hovering over the navbar area shows a native browser tooltip with the generated project title.
• On small screens, the resource links shift to the left instead of staying centered below the image.
• After logging in, the top-right user avatar is rendered inside a button, which looks visually incorrect.
• The logged-in avatar should be white with blue text for better contrast.
• The avatar dropdown opens toward the right and gets cut off near the viewport edge.
• The side navigation still shows the Home item as active after login, even though the authenticated page is no longer the Home page.
• The logged-in page only shows plain text like Hello, you are now logged in!, which looks weak and unfinished.
• The authenticated state should show a more polished minimal profile layout.

Steps to Reproduce

1. Run:
   ig new

2. Select Angular.

3. Select the Side Navigation with Authentication template.

4. Generate the project.

5. Install dependencies using yarn.

6. Start the generated application.

7. Observe the navbar login button and hover over the navbar/title area.

8. Resize the browser to a smaller width and check the resource links on the home page.

9. Log in using the generated authentication flow.

10. Observe the logged-in navbar avatar, avatar dropdown, active side navigation item, and profile page content.

Actual Result

The generated Angular Side Navigation with Authentication template has several visual and behavioral inconsistencies.

Expected Result

The Angular Side Navigation with Authentication template should have a polished and consistent UI before and after login.

Error Output / Logs

No terminal error is shown. The issues are visible in the generated project output and running application UI.

Additional Context

The template selection flow for the authentication template is also confusing and should be changed. Instead of showing Side Navigation with Authentication as a separate standalone template, the CLI should first let the user select a navigation template, such as Side Navigation or Mini Navigation, and then ask whether authentication should be added.

Expected template selection flow:

Select Angular.
Select Side Navigation or Mini Navigation.
Then select an additional option to add Authentication.

This would make the auth template behave like an enhancement of the selected navigation layout, instead of being a separate template that needs to duplicate and maintain its own inconsistent Side Navigation structure.

The generated result should preserve the selected navigation template structure and only add the authentication-specific functionality and UI.