feat: add show navbar on hover setting back

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

@@ -13,6 +13,7 @@ export default class Navbar extends PureComponent {
     return (
       <>
         <h2>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h2>
+        <Checkbox name='navbarHover' text={'Only display on hover'} category='navbar'/>
         <Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
         <Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
         <Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />

src/components/widgets/navbar/Navbar.jsx

@@ -54,8 +54,8 @@ export default class Navbar extends PureComponent {
 
   render() {
     const backgroundEnabled = (localStorage.getItem('background') === 'true');
-  
-    return (
+
+    const navbar = (
       <div className='navbar-container' ref={this.navbarContainer}>
         {(localStorage.getItem('view') === 'true' && backgroundEnabled) ? <Maximise/> : null}
         {(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> : null}
@@ -84,5 +84,11 @@ export default class Navbar extends PureComponent {
         </Tooltip>
       </div>
     );
+
+    if (localStorage.getItem('navbarHover') === 'true') {
+      return <div className='navbar-hover'>{navbar}</div>;
+    } else {
+      return navbar;
+    }
   }
 }

src/components/widgets/navbar/scss/index.scss

@@ -32,3 +32,21 @@
     }
   }
 }
+
+.navbar-hover {
+  position: absolute;
+  top: 0rem;
+  right: 0rem;
+  height: 50px;
+  width: 500px;
+
+  .navbar-container {
+    visibility: hidden;
+  }
+
+  &:hover {
+    .navbar-container {
+      visibility: visible;
+    }
+  }
+}