feat: navbar zoom

src/components/modals/main/settings/sections/Appearance.jsx

@@ -30,6 +30,7 @@ export default function AppearanceSettings() {
       <h3>{appearance.navbar.title}</h3>
       <Checkbox name='notesEnabled' text={appearance.navbar.notes} category='navbar' />
       <Checkbox name='refresh' text={appearance.navbar.refresh} category='navbar' />
+      <Slider title={appearance.accessibility.widget_zoom} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
 
       <h3>{appearance.font.title}</h3>
       <Text title={appearance.font.custom} name='font' upperCaseFirst={true} category='other' />

src/components/widgets/navbar/Navbar.jsx

@@ -11,12 +11,23 @@ import EventBus from '../../../modules/helpers/eventbus';
 import './scss/index.scss';
 
 export default class Navbar extends PureComponent {
+  setZoom() {
+    const zoomNavbar = Number((localStorage.getItem('zoomNavbar') || 100) / 100);
+    const navbarIcons = document.querySelectorAll('.navbar-container');
+    for (let i = 0; i < navbarIcons.length; i++) {
+      navbarIcons[i].style.fontSize = `${zoomNavbar}em`;
+    };
+  }
+
   componentDidMount() {
     EventBus.on('refresh', (data) => {
       if (data === 'navbar') {
         this.forceUpdate();
+        this.setZoom();
       }
     });
+
+    this.setZoom();
   }
 
   render() {

src/components/widgets/navbar/scss/_notes.scss

@@ -26,6 +26,7 @@
 
   svg {
     float: left;
+    font-size: 1em !important;
   }
 
   ::placeholder {
@@ -45,7 +46,7 @@ textarea {
 
 .topbarnotes {
   svg {
-    font-size: 46px;
+    font-size: 46px !important;
     padding: 9px;
   }