DiaryPageSelector styling

components/Blog/ContentPage.tsx

@@ -4,10 +4,10 @@ import DiaryPageSelector from "./DiaryPageSelector";
 
 const ContentPage: NextPage<{ content: ProjectRender | DiaryRender }> = ({ content }) => {
     return (<>
-        {content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries} /> : null}
+        {content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={content.pageSelected} name={content.name} pages={content.entries} /> : null}
         <div dangerouslySetInnerHTML={{ __html: content.html }}>
         </div>
-        {content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries} bottom /> : null}
+        {content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={content.pageSelected} name={content.name} pages={content.entries} bottom /> : null}
         </>);
 };
 

components/Blog/DiaryPageSelector.tsx

@@ -15,6 +15,7 @@ interface IContent {
 
 interface IContentNavBar extends IContent {
     mobile?: boolean;
+    bottom?: boolean;
     pages: string[];
 }
 
@@ -23,7 +24,7 @@ interface IContentNav extends IContent {
     pages: DiaryEntry[];
 }
 
-const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSelected, mobile }) => {
+const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSelected, mobile, bottom }) => {
     const router = useRouter();
 
     // When we are on the main page no previous page exists, otherwise we need to check if the previous page is the main page
@@ -52,15 +53,17 @@ const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSel
         </select>
     );
 
-    const classNames = mobile ? `${styles.barNav} ${styles.mobile}` : styles.barNav;
+    const classNames = `${styles.barNav} ${mobile ? styles.mobile : ""} ${bottom ? styles.bottom : styles.top}`;
 
     return (
         <div className={classNames}>
+            <span></span> {/* Spacer */}
             {prev}
             <span style={{visibility: prevLink ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
             {select}
             <span style={{visibility: nextLink ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
             {next}
+            <span></span> {/* Spacer */}
         </div>
     );
 };
@@ -68,17 +71,17 @@ const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSel
 const PageSelector: NextPage<IContentNav> = (content) => {
     const entries = content.pages.map(p => p.title);
 
-    if (content.bottom) return <PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} />;
+    if (content.bottom) return <PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} bottom />;
 
     return (
         <div className={styles.nav}>
             <PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} mobile />
             
             <div className={`${styles.sideNav} ${styles.desktop}`}>
-                <Link href={`/blog/diary/${content.name}`}><a><h4>{content.title}</h4></a></Link>
+                <Link href={`/blog/diary/${content.name}`}><a><h4 className={content.pageSelected === 0 ? styles.thisPage : undefined}>{content.title}</h4></a></Link>
-                <ul>
+                <ol>
-                    {entries.map((e, idx) => <li key={idx}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)}
+                    {entries.map((e, idx) => <li key={idx} className={content.pageSelected - 1 === idx ? styles.thisPage : undefined}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)}
-                </ul>
+                </ol>
             </div>
         </div>
     );

styles/Blog/Blog.module.scss

@@ -15,6 +15,7 @@
         border: 1px solid var(--blog_content-border);
         background: var(--blog_content-background);
         backdrop-filter: blur(var(--blog_content-blur));
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
   
     main {
@@ -30,7 +31,6 @@
     }
 
     footer {
-        
         margin: 5px auto 0;
         padding: 20px;
         border-bottom-left-radius: 1em;

styles/Blog/DiaryPageSelector.module.scss

@@ -0,0 +1,112 @@
+.sideNav {
+    float: right;
+    background: transparent;
+    /* 50px padding in main */
+    margin-right: -50px;
+    margin-top: -50px;
+    padding: 20px;
+    border-bottom-left-radius: 1em;
+    border-top-right-radius: 1em;
+    border: none;
+    border-left: 1px solid var(--blog_content-border);
+
+    h4 {
+        margin: 0 0 10px 0;
+    }
+
+    ol {
+        list-style-type: "\1405\0020\0020";
+        list-style-position: inside;
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        margin: 0;
+        padding: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        width: 200px;
+    }
+
+    li:hover {
+        &::marker {
+            font-weight: bold;
+        }
+    }
+
+    a:link, a:visited, a:hover, a:active {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    li.thisPage {
+        font-weight: bold;
+    }
+
+    h4.thisPage, h4:hover {
+        text-decoration: underline;
+    }
+}
+
+.barNav {
+    display: grid;
+    grid-template-columns: 1fr max-content max-content max-content max-content max-content 1fr;
+    align-items: center;
+    background: transparent;
+    padding: 10px;
+
+    select {
+        font-size: 110%;
+        padding: 5px;
+        border-radius: 1em;
+        border: 1px solid var(--blog_content-border);
+        background: #333;
+    }
+
+    &.top {
+        margin: -50px -50px 20px;
+        border-bottom: 1px solid var(--blog_content-border);
+    }
+
+    &.bottom {
+        margin: 20px -50px -50px;
+        border-top: 1px solid var(--blog_content-border);
+    }
+
+    a:link, a:visited, a:active {
+        color: inherit;
+        text-decoration: none;
+        font-weight: bold;
+    }
+    a:hover {
+        text-decoration: underline;
+    }
+}
+
+/* TODO: Move to asciidoc footer in Content.module.scss */
+.bottom {
+    clear: both;
+}
+
+
+/* To bottom as this should override everything */ 
+
+.mobile {
+    display: none;
+}
+
+.desktop {
+    display: block;
+}
+
+@media screen and (max-width: 900px) {
+  .mobile {
+    display: grid;
+  }
+
+  .desktop {
+    display: none;
+  }
+}