FIXED SIDEBAR SCROLL ISSUE!

src/App.css

@@ -20,12 +20,14 @@
     unicode-range: U+0600-06FF;
 } */
 
-.ais-SearchBox { margin: 1em 0; }
+.ais-SearchBox {
+    margin: 1em 0;
+}
 
 .table-of-contents {
     padding-top: 1rem;
     position: sticky !important;
-    top: 1rem;
+    top: 4rem;
     height: calc(100vh - 2rem);
     overflow-y: auto;
 }
@@ -34,12 +36,15 @@
     text-decoration: none;
     color: #21252A;
 }
+
 .heading-link:hover {
     color: #21252A;
 }
+
 .heading-link:active {
     color: #21252A;
 }
+
 .heading-link:visited {
     color: #21252A;
 }
@@ -67,19 +72,30 @@
 }
 
 @media (min-width: 821px) {
-    .sticky-on-big {
+    header {
         position: sticky;
         top: 0;
+        z-index: 9999999;
     }
+
+    .sticky-on-big {
+        position: fixed;
+        top: 65px;
+        bottom: 0;
+        overflow-y: scroll;
+    }
+
 }
 
 @media (max-width: 820px) {
     .main-row {
         height: calc(100vh - 62px);
     }
+
     .header-title {
         margin-left: 3.5rem;
     }
+
     .side-nav-btn {
         display: block;
         position: fixed;
@@ -87,9 +103,11 @@
         background: white;
         margin-left: 0.25rem;
     }
+
     aside {
         overflow-x: hidden;
     }
+
     .side-nav {
         display: block;
         min-width: 15rem;
@@ -101,10 +119,12 @@
         z-index: 99999;
         transition: all 0.25s linear;
     }
+
     .side-nav-closed {
         transform: translate(-100%);
-        -webkit-transform: translate(-100%); 
+        -webkit-transform: translate(-100%);
     }
+
     .overlay {
         display: block;
         position: fixed;
@@ -118,6 +138,7 @@
         /* animate the transition */
         transition: all 0.2s ease-in-out;
     }
+
     .overlay-showing {
         z-index: 99998;
         top: 0;
@@ -164,7 +185,7 @@
 }
 
 .side-nav-item-selected {
-    background-color: rgb(25,101,189, 0.3);
+    background-color: rgb(25, 101, 189, 0.3);
 }
 
 .side-nav-item-secondary {
@@ -186,6 +207,7 @@
     color: inherit;
     font-weight: bold;
 }
+
 .copyright a:hover {
     color: inherit;
     font-weight: bold;

src/components/Sidebar.jsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
 import SmoothCollapse from "react-smooth-collapse";
@@ -19,17 +19,31 @@ function Sidebar({ content, navOpen, setNavOpen, pathname }) {
     ));
     const openSectionHeading = openSection ? openSection.heading : "";
     const [sectionOpen, setSectionOpen] = useState(openSectionHeading);
+    const [sidebarWidth, setSidebarWidth] = useState(200);
+    useEffect(() => {
+        const s = document.getElementById("sidebar");
+        if (s) {
+            setSidebarWidth(s.offsetWidth);
+        }
+        window.addEventListener("resize", () => {
+            const s = document.getElementById("sidebar");
+            if (s) {
+                setSidebarWidth(s.offsetWidth);
+            }
+        });
+    }, []);
     function handleHeadingClick(h) {
         setSectionOpen(h === sectionOpen ? "" : h);
     }
     return (
         <>
             <aside
+                id="sidebar"
                 className={classNames(
                 "side-nav col-3 col-lg-2 p-0 bg-light",
                 { "side-nav-closed": !navOpen }
             )}>
-                <nav className="sticky-on-big flex-column align-items-start">
+                <nav className="sticky-on-big flex-column align-items-start" style={{ width: `${sidebarWidth}px` }}>
                         <Link to="/table-of-contents" style={{ textDecoration: "none", color: "inherit" }} onClick={() => setNavOpen(false)}>
                             <div className={classNames(
                                 "side-nav-item",

src/content/verbs/imperative-verbs.mdx

@@ -37,7 +37,7 @@ export const basicVerbs = verbs.filter(
   </Link>
 </Formula>
 
-The <i className="fas fa-video" /> **imperfective imperative** is used when you want to tell someone to something repeatedly, in general, or if you're wanting them to get going on action that will be ongoing.
+The <i className="fas fa-video" /> **imperfective imperative** is used when you want to tell someone to something repeatedly, in general, or if you're wanting them to get going on action that will be ongoing. It's used for giving commands in the <i className="fas fa-video" /> <Link to="/verbs/verb-aspect/#imperfective-aspect">imperfective aspect</Link>. It's also used when you want to emphasize the firmness or certainty of a command, regardless of aspect.
 
 <div className="text-center">
   <img src={imperfectiveImperative} alt="" className="img-fluid" />
@@ -171,7 +171,7 @@ For Pashto learners, having a choice between the perfective and imperfective imp
   </table>
 </div>
 
-Notice how the in the perfective form _the accent is always on the front_ because it's based on the <Link to="/verbs/roots-and-stems/">perfective stem</Link>.
+Notice how the in the perfective form _the accent is always on the front_ because it's based on the <Link to="/verbs/roots-and-stems/">perfective stem</Link>
 
 ### Singular and Plural
 
@@ -215,6 +215,35 @@ You will notice there are only two <Link to="/verbs/verb-endings/#imperative-ver
 
 <GameDisplay record={imperativeVerbGame2} />
 
+### Using the Imperfective Imperative for Emphasis
+
+You might remember that we can use the <Link to="/verbs/future-verbs/#imperfective-future">imperfective future</Link> to emphasize the _certainty_ of something happen, like saying that something will _definately_ happen, regardless of aspect.
+
+In the same way, we can use the <i className="fas fa-video" /> <Link to="/verbs/imperative-verbs/#imperfective-imperative">imperfective imperative</Link> to make a command more forceful and certain, kind of saying "definately make sure you do this!"
+
+<Examples opts={opts}>
+  {psmd([
+    {
+      p: "دا عکس راته **ولېږه**!",
+      f: "daa aks raa-ta **óoleGa**!",
+      e: "Send me that picture.",
+      sub: "Perfective - one time request",
+    },
+    {
+      p: "عکسونه راته **لېږه**!",
+      f: "aksóona raa-ta **leGá**!",
+      e: "Send me pictures.",
+      sub: "Imperfective - send again and again, over time",
+    },
+    {
+      p: "دا عکس راته **لېږه**!",
+      f: "daa aks raa-ta **leGá**!",
+      e: "Definately send me that picture!",
+      sub: "Imperfective form used to make the one time request more forceful and definite.",
+    },
+  ])}
+</Examples>
+
 ## Negative Imperatives
 
 **In the negative form of commands** (ie. _"Don't \_\_\_\_"_), **the aspect choice dissapears**. There is no imperfective/perfective option with negative imperatives, there's only one form.