revise: sidebar refactoring

Author: a-frantz

Diff for: wdl-doc/src/docs_tree.rs

@@ -253,7 +253,7 @@ impl DocsTree {
     /// rendered. If the node does not have a page associated with it, the
     /// name of the node will be rendered. All links will be relative to the
     /// given path.
-    pub fn render_sidebar_component<P: AsRef<Path>>(&self, path: P) -> Markup {
+    pub fn render_left_sidebar<P: AsRef<Path>>(&self, path: P) -> Markup {
         fn sidebar_recurse(node: &Node, base: &Path) -> Markup {
             html! {
                 @if let Some(page) = node.page() {
@@ -280,7 +280,7 @@ impl DocsTree {
         let base = path.as_ref().parent().unwrap();
 
         html! {
-            div class="top-0 border left-0 h-full w-1/6 p-4 dark:bg-slate-900 dark:text-white" {
+            div class="top-0 border h-fit left-0 min-w-[280px] w-[280px] p-4 dark:bg-slate-900 dark:text-white overflow-x-scroll" {
                 h1 class="text-2xl text-center" { "Sidebar" }
                 p class="" { (root.name()) }
                 ul class="" {
@@ -297,6 +297,16 @@ impl DocsTree {
         }
     }
 
+    /// Render a right sidebar component.
+    pub fn render_right_sidebar(&self) -> Markup {
+        html! {
+            div class="top-0 border h-screen sticky right-0 min-w-[240px] w-[240px] p-4 bottom-4 object-right dark:bg-red-900 dark:text-white" {
+                h1 class="text-2xl text-center" { "Sidebar" }
+                p class="" { "Right Sidebar" }
+            }
+        }
+    }
+
     /// Render every page in the tree.
     pub fn render_all(&self) -> anyhow::Result<()> {
         let root = self.root();
@@ -316,7 +326,7 @@ impl DocsTree {
         let root = self.root();
         let index_path = root.path().join("index.html");
 
-        let sidebar = self.render_sidebar_component(&index_path);
+        let left_sidebar = self.render_left_sidebar(&index_path);
         let content = html! {
             div class="" {
                 h3 class="" { "Home" }
@@ -349,10 +359,11 @@ impl DocsTree {
         let html = full_page(
             "Home",
             html! {
-                (sidebar)
-                div class="p-4 items-center" {
+                (left_sidebar)
+                div class="p-4 flex" {
                     (content)
                 }
+                (self.render_right_sidebar())
             },
             self.stylesheet_relative_to(root.path()).as_deref(),
         );
@@ -376,15 +387,16 @@ impl DocsTree {
 
         let stylesheet =
             self.stylesheet_relative_to(path.parent().expect("path should have a parent"));
-        let sidebar = self.render_sidebar_component(&path);
+        let left_sidebar = self.render_left_sidebar(&path);
 
         let html = full_page(
             page.name(),
             html! {
-                (sidebar)
-                div class="p-4" {
+                (left_sidebar)
+                div class="p-4 flex" {
                     (content)
                 }
+                (self.render_right_sidebar())
             },
             stylesheet.as_deref(),
         );

Diff for: wdl-doc/src/lib.rs

@@ -84,9 +84,9 @@ pub(crate) fn full_page<P: AsRef<Path>>(
 ) -> Markup {
     html! {
         (DOCTYPE)
-        html class="dark size-full" {
+        html class="dark" {
             (header(page_title, stylesheet))
-            body class="flex dark size-full dark:bg-slate-950 dark:text-white p-4" {
+            body class="flex size-full dark:bg-slate-950 dark:text-white p-4" {
                 (body)
             }
         }

Diff for: wdl-doc/theme/dist/style.css

@@ -5,6 +5,7 @@
     --font-sans: "DM Sans";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-900: oklch(0.396 0.141 25.723);
     --color-slate-900: oklch(0.208 0.042 265.755);
     --color-slate-950: oklch(0.129 0.042 264.695);
     --color-white: #fff;
@@ -164,9 +165,18 @@
   .relative {
     position: relative !important;
   }
+  .sticky {
+    position: sticky !important;
+  }
   .top-0 {
     top: calc(var(--spacing) * 0) !important;
   }
+  .right-0 {
+    right: calc(var(--spacing) * 0) !important;
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4) !important;
+  }
   .left-0 {
     left: calc(var(--spacing) * 0) !important;
   }
@@ -186,11 +196,23 @@
     width: 100% !important;
     height: 100% !important;
   }
-  .h-full {
-    height: 100% !important;
+  .h-fit {
+    height: fit-content !important;
+  }
+  .h-screen {
+    height: 100vh !important;
+  }
+  .w-\[240px\] {
+    width: 240px !important;
+  }
+  .w-\[280px\] {
+    width: 280px !important;
   }
-  .w-1\/6 {
-    width: calc(1/6 * 100%) !important;
+  .min-w-\[240px\] {
+    min-width: 240px !important;
+  }
+  .min-w-\[280px\] {
+    min-width: 280px !important;
   }
   .table-auto {
     table-layout: auto !important;
@@ -204,10 +226,16 @@
   .items-center {
     align-items: center !important;
   }
+  .overflow-x-scroll {
+    overflow-x: scroll !important;
+  }
   .border {
     border-style: var(--tw-border-style) !important;
     border-width: 1px !important;
   }
+  .object-right {
+    object-position: right !important;
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4) !important;
   }
@@ -224,6 +252,11 @@
     font-size: var(--text-2xl) !important;
     line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;
   }
+  .dark\:bg-red-900 {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-red-900) !important;
+    }
+  }
   .dark\:bg-slate-900 {
     &:where(.dark, .dark *) {
       background-color: var(--color-slate-900) !important;

Diff for: wdl-doc/theme/src/main.css

@@ -10,6 +10,7 @@
 /* Custom theme variables */
 @theme {
   --font-sans: "DM Sans";
+  --sidebar-width: 280px;
 }
 
 /* Scan Rust source code */