Add last modified date to all sidebar pages

components/Sidebar.tsx

@@ -69,6 +69,17 @@ const Sidebar: React.FC<Props> = ({
     return <PluginDetail hash={plugin} counts={counts} />;
   };
 
+  const renderLastModified = (lastModified: string | null | undefined) => {
+    if (lastModified) {
+      return (
+        <div className={styles["sidebar-modified-date"]}>
+          <strong>Last updated:</strong>{" "}
+          {formatRelative(new Date(lastModified), new Date())}
+        </div>
+      );
+    }
+  };
+
   const renderOpenSidebar = () => {
     if (selectedCell) {
       return (
@@ -76,15 +87,18 @@ const Sidebar: React.FC<Props> = ({
           className={styles.sidebar}
           style={!open ? { display: "none" } : {}}
         >
-          <div className={styles["sidebar-header"]}>
+          <div className={styles["sidebar-content"]}>
-            <button className={styles.close} onClick={onClose}>
+            <div className={styles["sidebar-header"]}>
-              <Image src={close} width={24} height={24} alt="close" />
+              <button className={styles.close} onClick={onClose}>
-            </button>
+                <Image src={close} width={24} height={24} alt="close" />
+              </button>
+            </div>
+            <h1 className={styles["cell-name-header"]}>
+              Cell {selectedCell.x}, {selectedCell.y}
+            </h1>
+            {renderCellData(selectedCell)}
+            {renderLastModified(lastModified)}
           </div>
-          <h1 className={styles["cell-name-header"]}>
-            Cell {selectedCell.x}, {selectedCell.y}
-          </h1>
-          {renderCellData(selectedCell)}
         </div>
       );
     } else if (router.query.mod) {
@@ -94,12 +108,15 @@ const Sidebar: React.FC<Props> = ({
           className={styles.sidebar}
           style={!open ? { display: "none" } : {}}
         >
-          <div className={styles["sidebar-header"]}>
+          <div className={styles["sidebar-content"]}>
-            <button className={styles.close} onClick={onClose}>
+            <div className={styles["sidebar-header"]}>
-              <Image src={close} width={24} height={24} alt="close" />
+              <button className={styles.close} onClick={onClose}>
-            </button>
+                <Image src={close} width={24} height={24} alt="close" />
+              </button>
+            </div>
+            {!Number.isNaN(modId) && renderModData(modId)}
+            {renderLastModified(lastModified)}
           </div>
-          {!Number.isNaN(modId) && renderModData(modId)}
         </div>
       );
     } else if (router.query.plugin) {
@@ -108,16 +125,19 @@ const Sidebar: React.FC<Props> = ({
           className={styles.sidebar}
           style={!open ? { display: "none" } : {}}
         >
-          <div className={styles["sidebar-header"]}>
+          <div className={styles["sidebar-content"]}>
-            <button className={styles.close} onClick={onClose}>
+            <div className={styles["sidebar-header"]}>
-              <Image src={close} width={24} height={24} alt="close" />
+              <button className={styles.close} onClick={onClose}>
-            </button>
+                <Image src={close} width={24} height={24} alt="close" />
+              </button>
+            </div>
+            {renderPluginData(
+              typeof router.query.plugin === "string"
+                ? router.query.plugin
+                : router.query.plugin[0]
+            )}
+            {renderLastModified(lastModified)}
           </div>
-          {renderPluginData(
-            typeof router.query.plugin === "string"
-              ? router.query.plugin
-              : router.query.plugin[0]
-          )}
         </div>
       );
     } else {
@@ -126,7 +146,7 @@ const Sidebar: React.FC<Props> = ({
           className={styles.sidebar}
           style={!open ? { display: "none" } : {}}
         >
-          <div className={styles["default-sidebar"]}>
+          <div className={styles["sidebar-content"]}>
             <h2>Modmapper</h2>
             <p className={styles.subheader}>
               An interactive map of Skyrim mods.
@@ -134,12 +154,7 @@ const Sidebar: React.FC<Props> = ({
             <DataDirPicker />
             <PluginTxtEditor />
             <PluginsList />
-            {lastModified && (
+            {renderLastModified(lastModified)}
-              <div className={styles["sidebar-modified-date"]}>
-                <strong>Last updated:</strong>{" "}
-                {formatRelative(new Date(lastModified), new Date())}
-              </div>
-            )}
           </div>
         </div>
       );
@@ -157,13 +172,17 @@ const Sidebar: React.FC<Props> = ({
           className={styles.open}
           onClick={() => setOpen(true)}
           title="Show sidebar"
-        ><Image src={arrow} alt="show" width={16} height={16} /></button>
+        >
+          <Image src={arrow} alt="show" width={16} height={16} />
+        </button>
       ) : (
         <button
           className={styles.hide}
           onClick={() => setOpen(false)}
           title="Hide sidebar"
-        ><Image src={arrow} alt="hide" width={16} height={16} /></button>
+        >
+          <Image src={arrow} alt="hide" width={16} height={16} />
+        </button>
       )}
       {renderOpenSidebar()}
     </>

styles/Sidebar.module.css

@@ -11,6 +11,7 @@
   padding-top: 24px;
   font-size: 0.875rem;
   border: 1px solid #222222;
+  height: 100%;
 }
 
 @media only screen and (max-width: 600px) {
@@ -134,7 +135,7 @@
   word-wrap: break-word;
 }
 
-.default-sidebar {
+.sidebar-content {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -142,6 +143,8 @@
 
 .sidebar-modified-date {
   margin-top: auto;
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
 
 .subheader {