Styles, set focus to sidebar on open

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/sidebar_menu.js

@@ -141,6 +141,10 @@ class SidebarMenu extends ImmutablePureComponent {
     if (accountChanged || otherAccountsChanged) {
       this.fetchOwnAccounts();
     }
+
+    if (this.props.sidebarOpen && !prevProps.sidebarOpen) {
+      document.querySelector('.sidebar-menu__close').focus();
+    }
   }
 
   renderAccount = account => {

app/styles/components/account-header.scss

@@ -202,7 +202,8 @@
         padding: 7px;
         opacity: 0.6;
 
-        &:hover {
+        &:hover,
+        &:focus {
           opacity: 1;
         }
 

app/styles/loading.scss

@@ -173,7 +173,8 @@
   clear: both;
   text-decoration: none;
 
-  &:hover {
+  &:hover,
+  &:focus {
     background: var(--brand-color--faint);
   }
 }

app/styles/navigation.scss

@@ -154,6 +154,11 @@
     justify-content: center;
     color: var(--primary-text-color--faint);
 
+    &:hover,
+    &:focus {
+      color: var(--primary-text-color);
+    }
+
     .svg-icon {
       margin-right: 7px;
       width: 22px;