Sdg23 restructure sidebar in website

_config.yml

@@ -123,3 +123,4 @@ numfocus:
   sponsored_project: https://numfocus.org/project/mdanalysis
   donate_button:     <a href="https://numfocus.org/donate-to-mdanalysis" target="_blank" style="background:#FF9200;padding:10px;margin:10px 0px;text-align:center;text-decoration:none;font-size:12pt;color:#000000;display:inline-block;border-radius:3px">Donate Now</a>
 
+

_includes/head.html

@@ -39,4 +39,8 @@
      anchors.add('h1, h2, h3, h4, h5, h6');
      });
   </script>
+
+  <!-- FontAwesome Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+
 </head>

_includes/sidebar.html

@@ -9,8 +9,29 @@ <h1>
       <p class="lead">{{ site.description }}</p>
     </div>
 
-    <div id="docsearch">Enable javascript for search.</div>
-
+    <!-- Social Media Icons -->
+    <div class="sidebar-social-icons">
+      <a href="{{ site.linkedin.url }}" target="_blank" title="LinkedIn">
+        <i class="fab fa-linkedin"></i>
+      </a>
+      <a href="{{ site.bluesky.url }}" target="_blank" title="Bluesky">
+        <img src="{{ site.baseurl }}/public/images/bluesky.svg" width="24" height="24" alt="Bluesky">
+      </a>
+      <a href="{{ site.discord.invite }}" target="_blank" title="Discord">
+        <i class="fab fa-discord"></i>
+      </a>
+      <a href="{{ site.github.repo }}" target="_blank" title="GitHub">
+        <i class="fab fa-github"></i>
+      </a>
+    </div>
+
+    <!-- Search Bar -->
+    <div class="sidebar-search">
+      <div class="sidebar-search-box">
+        <div id="docsearch">Enable javascript for search.</div>
+      </div>
+    </div>
+
     <nav class="sidebar-nav">
       {% assign site_base_url = site.baseurl | append: "/" %}
       <a class="sidebar-nav-item{% if page.url == site_base_url %} active{% endif %}" href="{{ site.baseurl }}/">Home</a>
@@ -19,7 +40,7 @@ <h1>
         The code below dynamically generates a sidebar nav of pages with
         `layout: page` in the front-matter. See readme for usage.
       {% endcomment %}
-
+    
       {% assign blogpagedir = site.paginate_path | split: ":" | first %}
       {% assign blogpagedir_len = blogpagedir | size %}
       {% assign pages_list = site.pages | sort: "order" %}
@@ -33,14 +54,8 @@ <h1>
           {% endif %}
         {% endif %}
       {% endfor %}
-
-      <a class="sidebar-nav-item" href="{{ site.docs.userguide.url }}">User Guide</a>	      
-      <a class="sidebar-nav-item" href="{{ site.docs.mdanalysis.url }}">Docs</a>
-      <a class="sidebar-nav-item" href="{{ site.pypi.package }}">Download</a>
-      <a class="sidebar-nav-item" href="{{ site.github.repo }}">GitHub project</a>
-      <a class="sidebar-nav-item" href="{{ site.twitter.url }}">@{{ site.twitter.name }}</a>
     </nav>
-
+    
     <p>&copy; {{ site.time | date: '%Y' }}. All rights reserved.</p>
   </div>
 </div>

about.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: About MDAnalysis
+order: 10
 ---
 
 <img src="{{ site.baseurl }}/public/mdanalysis-logo_square.png"

blog/index.html

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Blog
+order: 12
 ---
 
 <div class="posts">

pages/citations.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Citations
-order: 100
+order: 9
 ---
 
 MDAnalysis and the included algorithms are scientific software that

pages/privacy.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Privacy Policy
-order: 10
+order: 13
 ---
 
 MDAnalysis is a [fiscally sponsored

pages/team.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: MDAnalysis team
-order: 4
+order: 11
 ---
 
 MDAnalysis is a community-driven project that is made possible through the efforts of many members who contribute in numerous and diverse ways, ranging from direct package development, maintenance, documentation, communication, and managerial responsibilities. On this page we list identified project roles and team members for each of those roles. We note that the listed roles on this page can differ significantly in scope and required effort.
@@ -10,7 +10,7 @@ We also invite community members to reach out to [[email protected]](mailt
 
 ## Roles
 
-In this section we list major contributors who are currently contributing substantial effort to the roles listed below. This team organisation structure was started in November 2023; many people contributed to these tasks before then and may not appear in this table, in particular the [emeritus core developers]({{ site.url }}{% link about.md %}#mdanalysis-emeriti-core-developers).
+In this section we list major contributors who are currently devoting substantial effort to the roles listed below. This team organisation structure was started in November 2023; many people contributed to these tasks before then and may not appear in this table, in particular the [emeritus core developers]({{ site.url }}{% link about.md %}#mdanalysis-emeriti-core-developers).
 
 Names are listed in *alphabetical* order.
 

public/css/local.css

@@ -45,11 +45,78 @@ but our YouTube videos seem to be natively widescreen.
   position: absolute;
 }
 
-.wide-code pre {
-  white-space: pre;
-  overflow-x: auto;
-  display: block;
-  max-width: 100%;
+/* Sidebar Social Media Icons */
+
+.sidebar-social-icons {
+  display: flex;
+  justify-content: flex-start; 
+  align-items: center;
+  gap: 15px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: 100%; 
+  text-align: left; 
+}
+
+/* Ensure sidebar social icons override sidebar link styles */
+.sidebar .sidebar-social-icons a {
+  font-size: 24px !important;
+  text-decoration: none !important;
+}
+
+/* Apply white color to icons */
+.sidebar .sidebar-social-icons a[href*="linkedin.com"],
+.sidebar .sidebar-social-icons a[href*="discord.com"],
+.sidebar .sidebar-social-icons a[href*="github.com"] {
+  color: #ffffff !important; 
+}
+
+/* Hover effect for icons */
+.sidebar .sidebar-social-icons a:hover {
+  opacity: 0.8 !important;
+}
+
+/* Fix Bluesky Icon Alignment */
+.sidebar-social-icons img {
+  width: 24px;
+  height: 24px;
+  margin-bottom: -2px; 
+  object-fit: contain; 
+  transition: opacity 0.3s ease;
+}
+
+.sidebar-social-icons img[src*="bluesky"] {
+  filter: brightness(0) invert(1);
+}
+
+.sidebar-social-icons img:hover {
+  opacity: 0.8;
+}
+
+.sidebar-search {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
   width: 100%;
+  padding-left: 0; 
+  margin-left: -20px; 
+  margin-bottom: 20px;
 }
 
+.sidebar-search-box {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  text-align: left;
+  margin-left: 0; 
+  padding-left: 0; 
+}
+
+#docsearch {
+  width: 100%;
+  max-width: 100%;
+  text-align: left;
+  margin-left: 0 !important; 
+  padding-left: 5px; 
+}