Add config option to increase the navigation bar's size

Closes #4

frontend/sass/index.scss

@@ -1,3 +1,7 @@
+:root {
+	--nav-width: 48px;
+}
+
 body {
 	display: flex;
 	flex-direction: row;
@@ -7,7 +11,7 @@ body {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-    width: 48px;
+	width: var(--nav-width);
 }
 
 #navigation > :not(#service-buttons) {
@@ -53,7 +57,7 @@ body {
 }
 
 #service-selector .drag-target-self button::after {
-    height: 48px;
+	height: var(--nav-width);
 	border: 1px dashed #fff;
 	transform: none;
 }
@@ -76,8 +80,8 @@ body {
 #navigation button {
 	position: relative;
 	display: block;
-    width: 48px;
-    height: 48px;
+	width: var(--nav-width);
+	height: var(--nav-width);
 	margin: 0;
 	padding: 0;
 
@@ -94,11 +98,11 @@ body {
 }
 
 #navigation button img {
-    width: 24px;
+	width: calc(var(--nav-width) / 2);
 }
 
 #navigation button i {
-    font-size: 24px;
+	font-size: calc(var(--nav-width) / 2);
 }
 
 #service-selector li {
@@ -152,11 +156,11 @@ body {
 #history button,
 #history .status {
 	display: inline;
-    width: 24px;
-    height: 24px;
+	width: calc(var(--nav-width) / 2);
+	height: calc(var(--nav-width) / 2);
 	margin: 2px;
 	padding: initial;
-    font-size: 12px;
+	font-size: calc(var(--nav-width) / 4);
 
 	background: #fff1;
 

frontend/settings.html

@@ -35,6 +35,12 @@
             <label class="form-group"><input type="checkbox" name="start-minimized" id="start-minimized"> Start minimized in system tray</label>
         </section>
 
+        <section>
+            <h2 class="form-header">Appearance</h2>
+
+            <label class="form-group"><input type="checkbox" name="big-nav-bar" id="big-nav-bar"> Increase the size of the navigation bar</label>
+        </section>
+
         <section>
             <h2 class="form-header">History navigation buttons</h2>
 

frontend/ts/index.ts

@@ -207,6 +207,9 @@ ipcRenderer.on('data', (event, appData, iconSets, actualSelectedService, emptyUr
 
     // Other elements
     serviceSelector = document.getElementById('service-selector');
+
+    // Navbar size
+    document.documentElement.style.setProperty('--nav-width', config.bigNavBar ? '64px' : '48px');
 });
 
 function removeServiceFeatures(id: number): HTMLElement | null {

frontend/ts/settings.ts

@@ -8,6 +8,8 @@ let config: any;
 
 let startMinimizedField: HTMLInputElement | null;
 
+let bigNavBarField: HTMLInputElement | null;
+
 let securityButtonField: HTMLInputElement | null,
     homeButtonField: HTMLInputElement | null,
     backButtonField: HTMLInputElement | null,
@@ -22,6 +24,8 @@ ipcRenderer.on('config', (e, c) => {
     config = c;
     if (startMinimizedField) startMinimizedField.checked = config.startMinimized;
 
+    if (bigNavBarField) bigNavBarField.checked = config.bigNavBar;
+
     if (securityButtonField) securityButtonField.checked = config.securityButton;
     if (homeButtonField) homeButtonField.checked = config.homeButton;
     if (backButtonField) backButtonField.checked = config.backButton;
@@ -47,6 +51,8 @@ function save() {
 
     config.startMinimized = formData.get('start-minimized') === 'on';
 
+    config.bigNavBar = formData.get('big-nav-bar') === 'on';
+
     config.securityButton = formData.get('security-button') === 'on';
     config.homeButton = formData.get('home-button') === 'on';
     config.backButton = formData.get('back-button') === 'on';
@@ -55,7 +61,7 @@ function save() {
 
     ipcRenderer.send('save-config', config);
     remote.getCurrentWindow().close();
-};
+}
 
 document.addEventListener('DOMContentLoaded', () => {
     currentVersion = document.getElementById('current-version');
@@ -68,6 +74,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     startMinimizedField = <HTMLInputElement>document.getElementById('start-minimized');
 
+    bigNavBarField = <HTMLInputElement>document.getElementById('big-nav-bar');
+
     securityButtonField = <HTMLInputElement>document.getElementById('security-button');
     homeButtonField = <HTMLInputElement>document.getElementById('home-button');
     backButtonField = <HTMLInputElement>document.getElementById('back-button');

src/Config.ts

@@ -15,6 +15,8 @@ export default class Config {
 
     public startMinimized: boolean = false;
 
+    public bigNavBar: boolean = false;
+
     public securityButton: boolean = true;
     public homeButton: boolean = false;
     public backButton: boolean = true;
@@ -50,6 +52,8 @@ export default class Config {
         
         this.defineProperty('startMinimized', data);
 
+        this.defineProperty('bigNavBar', data);
+
         this.defineProperty('securityButton', data);
         this.defineProperty('homeButton', data);
         this.defineProperty('backButton', data);