ngx-builders/ngx-bulma

Move the logic into navbar component

santoshyadavdev opened this issue · 10 comments

santoshyadavdev commented

Describe the bug
A clear and concise description of what the bug is.

Expected behavior
A clear and concise description of what you expected to happen.

Currently, we have written the logic to close the hamburger menu in the app
https://github.com/ngx-builders/ngx-bulma/blob/main/projects/bulma-app/src/app/navbar/doc-navbar/doc-navbar.component.html#L24

The logic should nor be exposed to end-user and should be part of the library.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

I would be willing to submit a PR to fix this issue

[ ] Yes (Assistance is provided if you need help submitting a pull request)
[ ] No

shanmukhateja commented

Hi @santoshyadavdev ,

I am interested in solving this issue and willing to submit a PR. Do you have a plan of approach?

The main issue I currently see is gaining access to ElementRef without user explicitly declaring it in HTML? In case of /projects/bulma-app/src/app/navbar/navbar.component.html, there are multiple instances of bu-nav-brand for each color variant.
We could, in theory, inject ElementRef in bu-nav-brandconstructor and use querySelector but I personally don't like this approach.

santoshyadavdev commented

We would love to have the PR. let me know if you need any help 🤗

shanmukhateja commented

Hi @santoshyadavdev

How do we gain access to ElementRef when there are multiple instances of bu-nav-brand like in the case of /projects/bulma-app/src/app/navbar/navbar.component.html?

santoshyadavdev commented

Hi @santoshyadavdev

How do we gain access to ElementRef when there are multiple instances of bu-nav-brand like in the case of /projects/bulma-app/src/app/navbar/navbar.component.html?

You can use ViewChildren to get access.

shanmukhateja commented

Hi @santoshyadavdev ,

I am currently working on this issue on my fork at:

https://github.com/shanmukhateja/ngx-bulma/tree/refactor-menu-close

Current progress: Navbar menu clicks work either on web app's main Navbar header OR navbar component demo code in documentation.

Could you please look into my code and help me with it? I will provide a PR with accordance to your CONTRIBUTING.md requirements once the code is working and so it will be replaced in the future.

I just need a review from your end to check if my approach to solving the issue is correct.

santoshyadavdev commented

Sure let me check, and thank you 😊

shanmukhateja commented

Hi @santoshyadavdev,

I updated the PR and my commit message has been updated accordingly.

santoshyadavdev commented

closed by #453

shanmukhateja commented

Hey @santoshyadavdev,

You seem to have forgotten to close this issue.

santoshyadavdev commented

Oops my bad 😅