diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index 3fa4e47..f9a5127 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -69,6 +69,17 @@ const Sidebar: React.FC = ({ return ; }; + const renderLastModified = (lastModified: string | null | undefined) => { + if (lastModified) { + return ( +
+ Last updated:{" "} + {formatRelative(new Date(lastModified), new Date())} +
+ ); + } + }; + const renderOpenSidebar = () => { if (selectedCell) { return ( @@ -76,15 +87,18 @@ const Sidebar: React.FC = ({ className={styles.sidebar} style={!open ? { display: "none" } : {}} > -
- +
+
+ +
+

+ Cell {selectedCell.x}, {selectedCell.y} +

+ {renderCellData(selectedCell)} + {renderLastModified(lastModified)}
-

- Cell {selectedCell.x}, {selectedCell.y} -

- {renderCellData(selectedCell)}
); } else if (router.query.mod) { @@ -94,12 +108,15 @@ const Sidebar: React.FC = ({ className={styles.sidebar} style={!open ? { display: "none" } : {}} > -
- +
+
+ +
+ {!Number.isNaN(modId) && renderModData(modId)} + {renderLastModified(lastModified)}
- {!Number.isNaN(modId) && renderModData(modId)}
); } else if (router.query.plugin) { @@ -108,16 +125,19 @@ const Sidebar: React.FC = ({ className={styles.sidebar} style={!open ? { display: "none" } : {}} > -
- +
+
+ +
+ {renderPluginData( + typeof router.query.plugin === "string" + ? router.query.plugin + : router.query.plugin[0] + )} + {renderLastModified(lastModified)}
- {renderPluginData( - typeof router.query.plugin === "string" - ? router.query.plugin - : router.query.plugin[0] - )}
); } else { @@ -126,7 +146,7 @@ const Sidebar: React.FC = ({ className={styles.sidebar} style={!open ? { display: "none" } : {}} > -
+

Modmapper

An interactive map of Skyrim mods. @@ -134,12 +154,7 @@ const Sidebar: React.FC = ({ - {lastModified && ( -

- Last updated:{" "} - {formatRelative(new Date(lastModified), new Date())} -
- )} + {renderLastModified(lastModified)}
); @@ -157,13 +172,17 @@ const Sidebar: React.FC = ({ className={styles.open} onClick={() => setOpen(true)} title="Show sidebar" - >show + > + show + ) : ( + > + hide + )} {renderOpenSidebar()} diff --git a/styles/Sidebar.module.css b/styles/Sidebar.module.css index 4b29dfe..68523b9 100644 --- a/styles/Sidebar.module.css +++ b/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) { @@ -123,7 +124,7 @@ border-bottom: none; border-left: 2px solid #222222; } - + .open span { transform: rotate(270deg); } @@ -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 {