Add focus style to sidebar links, show # on focus

lj-n · Jul 7, 2020 · 4aeb2a2 · 4aeb2a2
1 parent 5aac3bd
commit 4aeb2a2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/.nextra/layout.js b/.nextra/layout.js
@@ -51,7 +51,12 @@ function Folder({ item, anchors }) {
   }, [active])
 
   return (
-    <li className={cn(open ? 'active' : '', { 'active-route': active })}>
+    <li
+      className={cn('focus:shadow-outline', {
+        'active-route': active,
+        active: open
+      })}
+    >
       <button
         onClick={() => {
           if (active) return

diff --git a/.nextra/styles.css b/.nextra/styles.css
@@ -125,7 +125,8 @@ content li {
   width: 1px;
 }
 
-.subheading-anchor + a:hover .anchor-icon {
+.subheading-anchor + a:hover .anchor-icon,
+.subheading-anchor + a:focus .anchor-icon {
   opacity: 1;
 }
 .anchor-icon {