Reader: add sidebar and TOC

reader.html

@@ -4,9 +4,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="Content-Security-Policy" content="default-src 'self' blob:; script-src 'self'; style-src 'self' blob: 'unsafe-inline'; img-src 'self' blob: data:; connect-src 'self' blob: data:; frame-src blob: data:; object-src 'none'; form-action 'none';">
 <style>
-* {
-    box-sizing: border-box;
-}
 body {
     margin: 0;
     font-family: system-ui, sans-serif;
@@ -17,10 +14,15 @@ body {
     align-items: center;
     justify-content: center;
 }
-#nav-bar {
-    visibility: hidden;
+.icon {
+    display: block;
+    fill: none;
+    stroke: currentcolor;
+    stroke-width: 2px;
+}
+.toolbar {
+    box-sizing: border-box;
     position: absolute;
-    bottom: 0;
     z-index: 1;
     display: flex;
     align-items: center;
@@ -30,33 +32,139 @@ body {
     padding: 6px;
     opacity: .25;
     transition: opacity 250ms ease;
+    visibility: hidden;
 }
-#nav-bar:hover {
+.toolbar:hover {
     opacity: 1;
 }
-#nav-bar button {
+.toolbar button {
     padding: 3px;
     border-radius: 6px;
     background: none;
     border: 0;
 }
-#nav-bar button:hover {
+.toolbar button:hover {
     background: rgba(0, 0, 0, .1);
 }
+#header-bar {
+    top: 0;
+}
+#nav-bar {
+    bottom: 0;
+}
 #progress-label {
     font-size: small;
     font-variant-numeric: tabular-nums;
 }
-.icon {
+#side-bar {
+    visibility: hidden;
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 320px;
+    transform: translateX(-320px);
+    display: flex;
+    flex-direction: column;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, .2);
+    transition: visibility 0s linear 300ms, transform 300ms ease;
+}
+#side-bar.show {
+    visibility: visible;
+    transform: translateX(0);
+    transition-delay: 0s;
+}
+#dimming-overlay {
+    visibility: hidden;
+    position: fixed;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .2);
+    opacity: 0;
+    transition: visibility 0s linear 300ms, opacity 300ms ease;
+}
+#dimming-overlay.show {
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 0s;
+}
+#toc-view {
+    padding: .5rem;
+    overflow-y: scroll;
+    --active-bg: rgba(0, 0, 0, .05);
+}
+@supports (color-scheme: light dark) {
+    @media (prefers-color-scheme: dark) {
+        #toc-view {
+            --active-bg: rgba(255, 255, 255, .1);
+        }
+    }
+}
+#toc-view li, #toc-view ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+#toc-view a, #toc-view span {
     display: block;
-    fill: none;
-    stroke: currentcolor;
-    stroke-width: 2px;
+    border-radius: 6px;
+    padding: 8px;
+    margin: 2px 0;
+}
+#toc-view a {
+    color: CanvasText;
+    text-decoration: none;
+}
+#toc-view a:hover {
+    background: var(--active-bg);
+}
+#toc-view span {
+    color: GrayText;
+}
+#toc-view svg {
+    margin-inline-start: -24px;
+    padding-inline-start: 5px;
+    padding-inline-end: 6px;
+    fill: CanvasText;
+    cursor: default;
+    transition: transform .2s ease;
+    opacity: .5;
+}
+#toc-view svg:hover {
+    opacity: 1;
+}
+#toc-view [aria-current] {
+    font-weight: bold;
+    background: var(--active-bg);
+}
+#toc-view [aria-expanded="false"] svg {
+    transform: rotate(-90deg);
+}
+#toc-view [aria-expanded="false"] + [role="group"] {
+    display: none;
 }
 </style>
 <input type="file" id="file-input" hidden>
 <div id="drop-target" class="filter">Drop a file here to open it.</div>
-<div id="nav-bar">
+<div id="dimming-overlay" aria-hidden="true"></div>
+<div id="side-bar">
+    <div id="toc-view"></div>
+</div>
+<div id="header-bar" class="toolbar">
+    <button id="side-bar-button" aria-label="Show sidebar">
+        <svg class="icon" width="24" height="24" aria-hidden="true">
+            <path d="M 4 6 h 16 M 4 12 h 16 M 4 18 h 16"/>
+        </svg>
+    </button>
+</div>
+<div id="nav-bar" class="toolbar">
     <button id="left-button" aria-label="Turn left page">
         <svg class="icon" width="24" height="24" aria-hidden="true">
             <path d="M 15 6 L 9 12 L 15 18"/>