-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Make Navbar mobile friendly #2117
Comments
On mobile the navbar now falls into a hamburger and is laid out vertically when opened, please spot me on any mistakes or non-ideal design patterns and considerations are always welcome! |
@ocBruno please open a pull request so that we can review your changes. If you’re not ready for it to be merged, but you want feedback, you can open a pull request and preface the title with ‘WIP’. |
Ah ok, will do! Thanks! |
Is that issue still open for work on it? I can make it |
Hi @andreykeycee, yes it is still open. You can read some considerations about this here: HospitalRun/components#227 Do you want to give a shot yourself to this? |
@fox1t yeah, I want to, you can set me as assignee |
@ocBruno What do you think? I am asking you because I know you were working on this. Are you still working on it or do you have any advices for @andreykeycee? |
Good day @andreykeycee @fox1t ! Feel free to pick this one up Andrey I had put it on hold considering I was facing some difficulties. You are welcome to get my pull request and use it however needed as I almost had this one finished, here are a couple considerations I have from working on this.
Thanks for the help and take care! |
@ocBruno, thank you for the detailed response! I will take a look at your PR. |
Hey guys, I just inspected those components, and how you work on it, and I wondering how carefully you're testing these, I like it! =) I have a couple of questions about it.
|
Hey @andreykeycee !
Hey @jackcmeyer @fox1t!
|
Hey, guys, I fix the problem itself, now navbar acts responsive, and also you can hide items on mobiles, if you want, but seems like I face the same issue, as @ocBruno with testing, and couldn't find any ways to check CSS via Enzyme, So I completely unavailable to check is components hides on mobiles. |
I was almost resorting to to using classes because if not mistaken I could find them with Enzyme but not sure if that is a good pattern/idea. If someone with more Enzyme/React testing knowledge could chime in ! |
There are a few different ways you can go about it. The Or, if you have already found the component or element you can do Some links about testing screen size https://stackoverflow.com/questions/46221210/jest-enzyme-how-to-test-at-different-viewports/51997030 |
Hey @andreykeycee! @jackcmeyer left some good insights here, I believe if you still have trouble encountering with css rules and find, use classses for styling and try locating them by I had closed my previous pull request after making all styles inline thinking I would be able to locate them with enzyme but debugging the wrappers always returned |
@jackcmeyer, @ocBruno thank you very much guys, I will try to use it tomorrow. It will be very helpful to get to know how to unit test viewport via jest! |
@andreykeycee I'm not sure why I wasn't able to before but I am testing inline styling in PR HospitalRun/components#271 with the following code samples. Not sure if I was targeting the correct wrapper with
|
The problem is there are not any changes in class names while resizing the screen. Bootstrap only changes the styles in media queries and it seems like I'm not allowed to read the component's not-inline CSS. |
If anyone has more experience with jest and can shed some light on properly testing dom style properties it would be much appreciated! This issue held me and @andreykeycee back from finishing up this contribution :/ |
Issue-Label Bot is automatically applying the label Links: app homepage, dashboard and code for this bot. |
Hi, PR is ready for your review: #2118 Thank you! |
🐛 Bug Report
The Navbar is not mobile friendly.
To Reproduce
Render the Navbar on any mobile device
Expected behavior
The Navbar options should be collapsed into a hamburger button. One the hamburger button is clicked, it should have a dropdown with all of the options that are a part of the navbar.
The text was updated successfully, but these errors were encountered: