From 747e6146a74b7908fade173ef6b2a9869fab1a7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 19 May 2021 00:43:26 +0200
Subject: [PATCH] Add a border to the menu button

This way we make it more obvious that it's clickable and, since adding a
border requires adding padding, we increase the touch area, making it
easier to use and more accessible for users with motor disabilities.

Since now the button looks like a button, we don't need the pointer
cursor Foundation adds to hamburger icons and can use the default cursor
browsers provide for buttons.
---
 app/assets/stylesheets/layout.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index c42d10a40..d94a1224b 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -668,11 +668,15 @@ body > header,
 }
 
 .menu-button {
+  border: 1px solid;
+  border-radius: $button-radius;
   color: inherit;
+  padding: 0.6em;
 }
 
 .menu-icon {
   @include hamburger($color: currentcolor, $color-hover: currentcolor);
+  cursor: inherit;
 }
 
 .title-bar {