Closes #539: Add dark mode and modernise navbar [create website]

NEWS.md

@@ -1,4 +1,21 @@
-# admiraldev 1.4.0.9000
+# admiraldev (development version)
+
+## New Features
+
+## Updates of Existing Functions
+
+## Documentation
+
+- The website navigation bar has been updated to: (#539)
+  - Add a night mode option. This can be be toggled using the sun/moon icon in the top right corner of the navigation bar. 
+  - Add a link to the "Get Started" vignette for developers.
+  - Add icon links to report a bug and join the pharmaverse Slack.
+  - Add tooltip each of the icons on the navigation bar.
+  - Increase the maximum height of the drop-down menus to ensure all items are visible without scrolling.
+
+## Various
+
+# admiraldev 1.4.0
 
 ## New Features
 

_pkgdown.yml

@@ -1,11 +1,18 @@
 url: https://pharmaverse.github.io/admiraldev/
 
 template:
+  math-rendering: mathjax
   bootstrap: 5
+  light-switch: true
+  bslib:
+    preset: "flatly"
+    primary: "#2c3e50"
+    navbar-bg: "#2c3e50"
   params:
     bootswatch: flatly
   includes:
-    in_header:
+    css: pkgdown/extra.css
+    in_header: |
       <script
       async
       src="https://widget.kapa.ai/kapa-widget.bundle.js"
@@ -23,6 +30,22 @@ template:
       data-modal-search-placeholder="Ask me a question about {admiraldev} or the {admiral} ecosystem..."
       data-modal-z-index="9999"
       ></script>
+
+      <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        // Select all navbar links that have an aria-label
+        var navLinks = document.querySelectorAll('.navbar-nav .nav-link[aria-label]');
+
+        navLinks.forEach(function (link) {
+          // Initialize Bootstrap 5 Tooltip
+          link.setAttribute('title', link.getAttribute('aria-label'));
+          new bootstrap.Tooltip(link, {
+            placement: 'bottom', // Tooltip appears below the icon
+            trigger: 'hover'
+          });
+        });
+      });
+      </script>
 repo:
   url:
     home: https://github.com/pharmaverse/admiraldev
@@ -136,30 +159,41 @@ reference:
   - has_keyword("deprecated")
 
 navbar:
- components:
-  reference:
+  structure:
+    left: [getstarted, reference, articles, news]
+    right: [search, slack, newissue, github, lightswitch]
+  components:
+    reference:
       text: Reference
       href: reference/index.html
-  articles:
-    text: Developer Guides
-    menu:
-    - text: Programming Strategy
-      href: articles/programming_strategy.html
-    - text: Writing Vignettes
-      href: articles/writing_vignettes.html
-    - text: Writing Custom Examples
-      href: articles/writing_custom_examples.html
-    - text: Unit Test Guidance
-      href: articles/unit_test_guidance.html
-    - text: Guidance for git and GitHub Usage
-      href: articles/git_usage.html
-    - text: Pull Request Review Guidance
-      href: articles/pr_review_guidance.html
-    - text: R CMD Issues
-      href: articles/rcmd_issues.html
-    - text: Release Strategy
-      href: articles/release_strategy.html
-    - text: Test Data Guidance
-      href: articles/test_data_guidance.html
-    - text: Package Extensions
-      href: articles/package_extensions.html
+    articles:
+      text: Developer Guides
+      menu:
+      - text: Programming Strategy
+        href: articles/programming_strategy.html
+      - text: Writing Vignettes
+        href: articles/writing_vignettes.html
+      - text: Writing Custom Examples
+        href: articles/writing_custom_examples.html
+      - text: Unit Test Guidance
+        href: articles/unit_test_guidance.html
+      - text: Guidance for git and GitHub Usage
+        href: articles/git_usage.html
+      - text: Pull Request Review Guidance
+        href: articles/pr_review_guidance.html
+      - text: R CMD Issues
+        href: articles/rcmd_issues.html
+      - text: Release Strategy
+        href: articles/release_strategy.html
+      - text: Test Data Guidance
+        href: articles/test_data_guidance.html
+      - text: Package Extensions
+        href: articles/package_extensions.html
+    slack:
+      icon: fa-slack
+      href: https://pharmaverse.slack.com/
+      aria-label: Join the pharmaverse Slack!
+    newissue:
+      icon: fa-bug
+      href: https://github.com/pharmaverse/admiraldev/issues/new/choose
+      aria-label: Report an issue

pkgdown/extra.css

@@ -0,0 +1,35 @@
+/* pkgdown/extra.css */
+
+/* Force the navbar to be Admiral Blue (#2c3e50) */
+.navbar {
+  background-color: #2c3e50 !important;
+
+  /* Force the text variables to be white/light */
+  --bs-navbar-color: rgba(255, 255, 255, 0.8) !important;
+  --bs-navbar-hover-color: #ffffff !important;
+  --bs-navbar-active-color: #ffffff !important;
+  --bs-navbar-brand-color: #ffffff !important;
+}
+
+/* Ensure the hamburger menu (mobile) uses white lines */
+.navbar-toggler {
+  border-color: rgba(255,255,255,0.1) !important;
+}
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
+}
+
+/* Force any "muted" text (like the version number) to be light gray in the navbar */
+.navbar .text-muted,
+.navbar small,
+.navbar .version {
+  color: #d0d0d0 !important; /* Light gray */
+}
+
+.dropdown-menu {
+  /* Set a larger fixed height (default is usually around 50vh or 300px) */
+  max-height: 100vh !important;
+
+  /* Smooth scrolling if it does eventually need to scroll */
+  overflow-y: auto !important;
+}