From 33ef113f6dc75bb6fe5185e3e91f18f4c50c6be8 Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Thu, 30 Sep 2021 19:35:02 +0100
Subject: [PATCH] feat: add show navbar on hover setting back

---
 .../modals/main/settings/sections/Navbar.jsx   |  1 +
 src/components/widgets/navbar/Navbar.jsx       | 10 ++++++++--
 src/components/widgets/navbar/scss/index.scss  | 18 ++++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
index 0b355b62..1183bd6f 100644
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/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' />
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index 8a9d8655..c1091b80 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/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;
+    }
   }
 }
diff --git a/src/components/widgets/navbar/scss/index.scss b/src/components/widgets/navbar/scss/index.scss
index e6cd4194..ac43bb5a 100644
--- a/src/components/widgets/navbar/scss/index.scss
+++ b/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;
+    }
+  }
+}