Feedback on Responsive Side Nav

sibert

My intent is to create an own admin site. There are tons of them out there, but most of them are slow. So I decided to test Golang instead of common php or framework.

The first problem that I hit was to hide and show the side navigation. It seems that the javascript and media query did not work together. Now I think I found one solution that seems to work. But there are probably room for improvements.

A jsfiddle: https://jsfiddle.net/p5wohy4m/14/
Live site: http://94.237.25.207:8080

Any tip, improvement or UX comments are welcome.

RaulRogojan

sibert
3 Things:

I would keep the menu button in the same place if it's a toggle. If you the button is not a toggle I would add an X button to close the navbar;
I would also add a transition. You can do that by adding transition: all 300ms ease-in to the navbar in css. Also, the hover effect on mobile is not a big deal as you can hover over an element on mobile;
I would make the text color on hover not be a dark color if you have a dark background. Make it a different color or keep it white but lower the opacity. something like color: rgba(255,255,255,.7);

sibert

RaulRogojan 3 Things:

Good point. I will implement this.
I will test this also.
Actually this is not ready yet, so the color will be on the background.

RaulRogojan

sibert Dope!
Good luck!

sibert

RaulRogojan Dope!

Thank you for your support!

Implemented
I did not get it to work
Implemented (see below)

jsfiddle: https://jsfiddle.net/gv4820j1/3/
Live site: http://94.237.25.207:8080

Next problem is to close ALL dropdowns but ONE. Using vanilla Javascript.
My clumsy attempt below:

// close all dropdowns (does not work and makes it impossible to close the dropdown)
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display == "block") {
      dropdownContent.style.display = "none";
    } 
  });
}

//close and open dropdowns
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

Any tip?

RaulRogojan

sibert Awesome!
I would appreciate a CodePen or JSFiddle with all the code. Not just HTML and CSS.

When it comes to closing the dropdowns, you code it in an old way so I don't really understand it.
I feel like you complicated yourself a lot by doing that. There are much simpler ways of doing it.
I would suggest you get a look at data-type. Here I build the tabs using that. With this, I also build my portfolio. the mobile version you can check that out here.
The only difference is that I used

 portfolioButtons.forEach(button => {
            button.addEventListener('click', ()=> {
                const targetContent = document.querySelector(button.dataset.contentTarget);
                targetContent.classList.toggle('containers-active');
            });
        });

To understand this concept better I will leave you a tutorial here.

sibert

RaulRogojan I would appreciate a CodePen or JSFiddle with all the code. Not just HTML and CSS.

jsfiddle: https://jsfiddle.net/gv4820j1/3/

OK?

RaulRogojan

sibert no. Copy all of the code

sibert

RaulRogojan no. Copy all of the code

The Javascript is embedded in the html...

RaulRogojan

sibert https://codepen.io/raul-rogojan/pen/NWKpOaJ?editors=0010
I made it work.
BTW using display none and display block to make the navbar close and open is not the best idea so I am suggesting you try something else. like, transform translate opacity position absolute. Play around some more.

RaulRogojan

sibert Also to understand the code make sure to check the tutorial that I left above. If you have any question ask.

sibert

RaulRogojan I made it work.
BTW using display none and display block to make the navbar close and open is not the best idea

Thank You!

There are some things in this solution I need some explanation:

The side nav is no longer responsive (do not disappear automatically on small screens)...
The next step is to create this nav on-the-fly. Is there any problems with fixed ids like #box-3?
How do I close ALL sub menus but ONE. Now all is open (the others remains open...)?

Or will this be explained in the video enclosed in your previous mail?

RaulRogojan

sibert

The navbar is no longer "responsive" because I deleted the code that made it responsive. The function you had with the media queries. But you don't need to do that in javaScript. Instead, you should do it in CSS. Tutorial here. BTW if you want the img to disappear on the desktop version, you can do it with display none and display block.
I don't know what you mean by "on-the-fly" and by "fixed ID's". The reason you have those ID's is to link the dropdown buttons to the dropdown box. If you would have watched the video you would have know why you need those ID's.
To close the other dropdown boxes you need to tap again on the dropdown buttons.
element.classList.toggle('class') = element.classList.add('class'); element.classList.remove('class').
In other wards, toggle is adding and removing that class.
If you mean that you want to close all the other boxes when you open another one. I let you a comment in the CodePen.
I let the explanation and the code right below. I will also leave it here.
```
//   This is if you want to close the other dropdow boxes;
 dropDownBox.forEach(box => box.classList.remove('drop-down-active'));
```

The video teaches you how to build tab manus. It does it with data and dataset. This concept will help you in many other situations. Unfortunately, the tutorial is a bit different from what you need. Watch the tutorial, try to implement it in the things you need. You have to think a little bit by yourself 😃.

Good luck!

sibert

RaulRogojan But you don't need to do that in javaScript. Instead, you should do it in CSS.

Well, I just do not get it to work with CSS. The toggle button stops working on mobile.

[https://jsfiddle.net/0o9qxeh2/25/](CSS media query not working)

But using the toggle in js, this will work more predictable:

[https://jsfiddle.net/0o9qxeh2/22/](Javascript media query works)

So, the question is if it possible to get the toggle button using CSS, work like the js version?

sibert

RaulRogojan I don't know what you mean by "on-the-fly"

You can hardcode the menu, but you can also make it data driven. I have note tested yet, but found one example of populating on-the-fly:

 <select> // for loop in html template example
   {{range $key, $value := .}}
     <option value="{{ $value }}">{{ $key }}</option>
   {{end}}
</select>

The data could be from a SQL query or similar.

Using id for each submenu moves the problem to a previous level. Adding complexity to the template looping.

RaulRogojan

sibert I get it but that's something you have to figure it out.

sibert

RaulRogojan that's something you have to figure it out.

About a week later I have figured out how to avoid #id and get the media query to work:
https://jsfiddle.net/vnq3ws4L/5/

Thank you for pointing me in the right direction!

RaulRogojan

sibert Nice job

RaulRogojan

sibert I just found this tutorial and I thought it might help you. This will make you understand better how to sidebar works.

sibert

RaulRogojan I just found this tutorial

Thank you! I have implemented some of your tip in the live site: http://94.237.25.207:8080

RaulRogojan

sibert better, make the transition when nav bar is opening longer.