Add icons to navbar items

[joshlawton]

Let's add some navbar icons using emoji.

const navbarLinks = document.querySelectorAll('a.nav-link');
navbarLinks[0].textContent += " ⚙️"; // Setup
navbarLinks[1].textContent += " 🔒"; // Security
navbarLinks[2].textContent += " 🛡️"; // Privacy
navbarLinks[3].textContent += " 👪"; // Parental Controls
navbarLinks[4].textContent += " 🚫"; // Denylist
navbarLinks[5].textContent += " ✅"; // Allowlist
navbarLinks[6].textContent += " 📈"; // Analytics
navbarLinks[7].textContent += " 📒"; // Logs
navbarLinks[8].textContent += " 🎛️"; // Settings

[hjk789]

Maybe that could be an option for visually oriented people, but not the default, as I'm used to the nav-links not having any icons (and probably other users too). Also, I think it would be better if the icons matched NextDNS' color scheme (blue, white and light gray).

[joshlawton]

Indeed, I agree with both points. In the mock I used plain ol' system emojis to simulate potential icons. I definitely wouldn't use them in production :-)

[hjk789]

Ok, this could be implemented after the Preferences screen feature.

[hjk789]

This could use icon libraries like Font Awesome, with the icon base64 encoded.

[AC9864]

This is quite useful, especially for non tech savvy users!

[Sam-Oak]

Ok, this could be implemented after the Preferences screen feature.

maybe it can be now, with the new browser toolbar menu

[hjk789]

@Sam-Oak Sure, but cosmetic features such as this one and the dark mode, will be left for later, in favor of new functionalities.