New sidebar and website content overhaul

_data/sidebar.yml

@@ -0,0 +1,46 @@
+- title: "Home"
+  url: "/"
+- title: "About"
+  url: "/about/"
+- title: "News"
+  url: "/news/"
+- title: "Getting Started"
+  url: "/getting-started/"
+  submenu:
+    - title: "Installation"
+      url: "/getting-started/install/"
+    - title: "Tutorials"
+      url: "/getting-started/tutorials/"
+    - title: "Documentation"
+      url: "/getting-started/documentation/"
+    - title: "The OSCAR Book"
+      url: "https://book.oscar-system.org/"
+- title: "Events"
+  url: "/events/"
+  submenu:
+    - title: "OSCAR Events"
+      url: "/events/oscar-events/"
+    - title: "Satellite Events"
+      url: "/events/satellite-events/"
+    - title: "Talks"
+      url: "/events/talks/"
+- title: "Getting in touch"
+  url: "/getting-in-touch/"
+  submenu:
+    - title: "Getting Help"
+      url: "/getting-in-touch/getting-help/"
+    - title: "Reporting issues"
+      url: "/getting-in-touch/reporting-issues/"
+    - title: "Contributing"
+      url: "/getting-in-touch/contributing/"
+- title: "Credits & Citations"
+  url: "/credits-and-citations/"
+  submenu:
+    - title: "People Credits"
+      url: "/credits-and-citations/contributors/"
+    - title: "Software Credits"
+      url: "/credits-and-citations/software-credits/"
+    - title: "How to cite OSCAR"
+      url: "/credits-and-citations/how-to-cite-OSCAR/"
+    - title: "Works citing OSCAR"
+      url: "/credits-and-citations/works-citing-OSCAR"

_includes/sidebar.html

@@ -1,63 +1,57 @@
 <div class="sidebar">
   <div class="container">
     <div class="sidebar-about">
-        <a href="{{ site.baseurl }}/">
-          <img class="sidebar-image" src="{{ site.baseurl }}/public/OSCAR_logo.png" alt="OSCAR Symolic Tools"/>
-        </a>
-      <p class="lead">The OSCAR project</p>
+      <a href="{{ site.baseurl }}/">
+        <img class="sidebar-image" src="{{ site.baseurl }}/public/OSCAR_logo.png" alt="OSCAR Symbolic Tools" />
+      </a>
+      <p class="lead">The OSCAR Project</p>
       <hr>
     </div>
 
     <nav class="sidebar-nav">
-
-      <a class="sidebar-nav-item{% if page.url == '/' %} active{% endif %}" href="{{ site.baseurl }}/">Home</a>
-
-      <a class="sidebar-nav-item{% if page.url == '/about/' %} active{% endif %}" href="{{ site.baseurl }}/about/">About</a>
-
-      <a class="sidebar-nav-item{% if page.url == '/news/' %} active{% endif %}" href="{{ site.baseurl }}/news/">News</a>
-
-      <a class="sidebar-nav-item{% if page.url == '/install/' %} active{% endif %}" href="{{ site.baseurl }}/install/">Installation</a>
-
-      <a class="sidebar-nav-item{% if page.url contains '/tutorials/' %} active{% endif %}" href="{{ site.baseurl }}/tutorials/">Tutorials</a>
-
-      <a class="sidebar-nav-item{% if page.url == '/documentation/' %} active{% endif %}" href="{{ site.baseurl }}/documentation/">Documentation</a>
-
-      <a class="sidebar-nav-item{% if page.url == '/community/' %} active{% endif %}" href="{{ site.baseurl }}/community/">Community</a>
-
-      <a class="sidebar-nav-item{% if page.url == '/talks/' %} active{% endif %}" href="{{ site.baseurl }}/talks/">Talks</a>
-
-      <a class="sidebar-nav-item{% if page.meeting %} active{% endif %}" href="{{ site.baseurl }}/meetings/">Meetings</a>
-
-      <a class="sidebar-nav-item{% if page.url == '/credits/' %} active{% endif %}" href="{{ site.baseurl }}/credits">Credits</a>
-
-      <a class="sidebar-nav-item{% if page.url == '/contributors/' %} active{% endif %}" href="{{ site.baseurl }}/contributors">Contributors</a>
-
-      <a class="sidebar-nav-item" href="https://book.oscar-system.org/">The OSCAR book</a>
-
-      <a class="sidebar-nav-item" href="https://github.com/oscar-system/Oscar.jl/">Oscar.jl on Github</a>
-
-      <a class="sidebar-nav-item{% if page.url == '/mardi/' %} active{% endif %}" href="{{ site.baseurl }}/mardi">MaRDI</a>
-
-      <!-- {% comment %}
-        The code below dynamically generates a sidebar nav of pages with
-        `layout: page` in the front-matter. See readme for usage.
-      {% endcomment %}
-
-      {% assign pages_list = site.pages | sort:"name" %}
-      {% for node in pages_list %}
-        {% if node.title != null %}
-          {% if node.notinsidebar == null %}
-            {% if node.layout == "page" or node.layout == "tutorials" %}
-              <a class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}" href="{{ site.baseurl }}/{{ node.url }}">{{ node.title }}</a>
-              <p/>
-            {% endif %}
+      {% for item in site.data.sidebar %}
+        <div class="sidebar-nav-item {% if page.url == item.url %}active{% endif %}">
+          <a href="{{site.baseurl}}{{item.url}}" class="sidebar-nav-link">
+            {{ item.title }}
+          </a>
+          {% if item.submenu %}
+          <button type="button" class="collapser {{page.url}} {{item.url}} {% if page.url contains item.url %}active{% endif %}" data-target="#submenu-{{ forloop.index }}"></button>
+          {% endif %}
+          {% if item.submenu %}
+            <ul 
+              class="collapse{% if page.url contains item.url %} show{% endif %}" 
+              id="submenu-{{ forloop.index }}"
+            >
+              {% for subitem in item.submenu %}
+                <li class="{% if page.url == subitem.url %}active{% endif %}">
+                  <a href="{% if subitem.url contains 'http' %}{{ subitem.url }}{% else %}{{ site.baseurl }}{{ subitem.url }}{% endif %}" {%if subitem.url contains 'http'%}target="_blank"{%endif%}> {{ subitem.title }}</a>
+                </li>
+              {% endfor %}
+            </ul>
           {% endif %}
-        {% endif %}
-      {% endfor %} -->
-      <div class="mobile-hidden">
-        <hr>
-        {%include footer.html %}
-      </div>
+        </div>
+      {% endfor %}
     </nav>
+
+    <div class="mobile-hidden">
+      <hr>
+      {% include footer.html %}
+    </div>
   </div>
 </div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const toggles = document.querySelectorAll('.collapser');
+    toggles.forEach(toggle => {
+      toggle.addEventListener('click', function (e) {
+        const target = document.querySelector(this.getAttribute('data-target'));
+        this.classList.toggle('active');
+        if (target) {
+          e.preventDefault();
+          target.classList.toggle('show');
+        }
+      });
+    });
+  });
+</script>

_sass/hyde.scss

@@ -53,114 +53,142 @@ html {
  * out above content in mobile and later moves to the side with wider viewports.
  */
 
+
+ .collapse {
+  display: none;
+  margin: 0;
+}
+
+.collapse.show {
+  display: block;
+}
+
+button.collapser {
+  visibility: hidden;
+  padding: 0;
+  border-width: 0;
+}
+
+button.collapser::after {
+  visibility: visible;
+  content: " ▼"; /* Add a dropdown indicator */
+}
+
+button.collapser.active::after {
+  content: " ▲"; /* Change indicator when submenu is open */
+}
+
+
+/* General Sidebar Styling */
 .sidebar {
   text-align: center;
   padding: 0.7rem 0.7rem;
-  color: rgb(0,0,0);
+  color: rgb(0, 0, 0);
   background-color: #202020;
   overflow: auto;
 }
+
 @media (min-width: 48em) {
   .sidebar {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
-    width: 12rem;
+    width: 13rem;
     text-align: left;
   }
 }
 
-/* Sidebar links */
+/* Sidebar Links */
 .sidebar a {
   color: #000000;
   margin-bottom: 3px;
+  text-decoration: none;
 }
 
-/* About section */
+.sidebar a:hover,
+.sidebar a:focus {
+  text-decoration: underline;
+}
+
+/* About Section */
 .sidebar-about h1 {
   color: #000000;
   margin-top: 0;
   font-family: "Abril Fatface", serif;
   font-size: 2.25rem;
 }
 
-/* Sidebar nav */
+/* Sidebar Navigation */
 .sidebar-nav {
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
+
 .sidebar-nav-item {
   display: block;
+  margin-bottom: 0.2rem;
 }
 
-.inner-sidebar-nav-item {
-  display: block;
-  margin-left: 6px;
-}
-.sidebar-nav-item-inner.active {
-  font-weight: bold;
+.sidebar-nav-item > a {
+  color: #000;
 }
 
-.inner-sidebar-nav-item-two {
-  margin-left: 12px;
-  display: block;
+/* Submenu Styling */
+.sidebar-submenu {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 0 1rem; /* Indent for submenus */
 }
 
-@media (max-width: 48em) {
-  .sidebar-nav-item {
-    display: inline;
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-
-  .inner-sidebar-nav-item {
-    display: inline;
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-  .sidebar-nav-item-inner.active {
-    font-weight: inline;
-    margin-left: 4px;
-    margin-right: 4px;
-  }
+.sidebar-submenu li {
+  margin-bottom: 0.0rem;
+}
 
-  .inner-sidebar-nav-item-two {
-    display: inline;
-    margin-left: 4px;
-    margin-right: 4px;
-  }
+.sidebar-submenu a {
+  font-size: 0.9em;
+  color: #666;
+  text-decoration: none;
 }
 
-a.inner-sidebar-nav-item:hover,
-a.inner-sidebar-nav-item:focus {
+.sidebar-submenu a:hover,
+.sidebar-submenu a:focus {
   text-decoration: underline;
 }
-.inner-sidebar-nav-item.active {
+
+.sidebar-submenu .active > a {
   font-weight: bold;
+  color: #000;
 }
 
-a.inner-sidebar-nav-item-two:hover,
-a.inner-sidebar-nav-item-two:focus {
-  text-decoration: underline;
-}
-.inner-sidebar-nav-item-two.active {
+/* Active State Styling */
+
+li.active > a {
   font-weight: bold;
+  color: #000;
 }
 
-a.sidebar-nav-item:hover,
-a.sidebar-nav-item:focus {
-  text-decoration: underline;
-}
-.sidebar-nav-item.active {
+.sidebar-nav-item.active > a {
   font-weight: bold;
+  color: #000;
 }
 
-.sidebar-nav-item.minor {
-  color: rgb(0,0,0);
-  font-size: 60%;
+.sidebar-submenu .active > a {
+  font-weight: bold;
+  color: #000;
 }
 
+/* Mobile-Specific Adjustments */
 @media (max-width: 48em) {
+  .sidebar-nav-item {
+    display: inline;
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+
+  .sidebar-submenu {
+    margin-left: 4px;
+  }
+
   .mobile-hidden {
     display: none;
   }

credits-and-citations/how-to-cite-OSCAR.md

@@ -0,0 +1,41 @@
+---
+layout: page
+title: How to cite OSCAR
+---
+
+If you have used OSCAR in the preparation of a paper please cite it as described below:
+
+```md
+[OSCAR]
+    OSCAR -- Open Source Computer Algebra Research system, Version 1.0.0,
+    The OSCAR Team, 2024. (https://www.oscar-system.org)
+[OSCAR-book]
+    Wolfram Decker, Christian Eder, Claus Fieker, Max Horn, Michael Joswig, eds.
+    The Computer Algebra System OSCAR: Algorithms and Examples,
+    Algorithms and Computation in Mathematics, Springer, 2025. (https://link.springer.com/book/9783031621260)
+```
+
+If you are using BibTeX, you can use the following BibTeX entries:
+
+```bibtex
+@misc{OSCAR,
+  key          = {OSCAR},
+  organization = {The OSCAR Team},
+  title        = {OSCAR -- Open Source Computer Algebra Research system,
+                  Version 1.0.0},
+  year         = {2024},
+  url          = {https://www.oscar-system.org},
+  }
+
+@book{OSCAR-book,
+  editor = {Decker, Wolfram and Eder, Christian and Fieker, Claus and Horn, Max and Joswig, Michael},
+  title = {The {C}omputer {A}lgebra {S}ystem {OSCAR}: {A}lgorithms and {E}xamples},
+  year = {2025},
+  publisher = {Springer},
+  series = {Algorithms and {C}omputation in {M}athematics},
+  volume = {32},
+  edition = {1},
+  url = {https://link.springer.com/book/9783031621260},
+  issn = {1431-1550},
+}
+```