fix: sidebar movement after clicking a link

Author: pratikb64

wiki/public/js/wiki.js

@@ -9,17 +9,16 @@ window.Wiki = class Wiki {
       if ($(this).data("route") == page_href) {
         $(this).addClass(active_class);
         $(this).find("a").addClass(active_class);
+
+        const element = $(this);
+        setTimeout(function () {
+          const topOffset = element.position().top;
+          $(".doc-sidebar .web-sidebar")
+            .get(0)
+            .scrollTo(0, topOffset - 200);
+        }, 50);
       }
     });
-    // scroll the active sidebar item into view
-    let active_sidebar_item = $(".doc-sidebar .sidebar-item.active");
-    if (active_sidebar_item.length > 0) {
-      setTimeout(function () {
-        let position =
-          active_sidebar_item.offset().top - $(".doc-sidebar").offset().top;
-        $(".doc-sidebar .web-sidebar").get(0).scrollTo(0, position);
-      }, 50);
-    }
   }
 
   toggle_sidebar(event) {
@@ -32,7 +31,7 @@ window.Wiki = class Wiki {
     $(".doc-sidebar,.web-sidebar").on(
       "click",
       ".collapsible",
-      this.toggle_sidebar,
+      this.toggle_sidebar
     );
 
     $(".sidebar-item.active")
@@ -46,7 +45,7 @@ window.Wiki = class Wiki {
 
   set_last_updated_date() {
     const lastUpdatedDate = frappe.datetime.prettyDate(
-      $(".user-contributions").data("date"),
+      $(".user-contributions").data("date")
     );
     $(".user-contributions").append(`last updated ${lastUpdatedDate}`);
   }
@@ -57,7 +56,7 @@ window.Wiki = class Wiki {
       const src = $(".navbar-brand img").attr("src");
       if (
         !["{{ light_mode_logo }}", "{{ dark_mode_logo }}", "None", ""].includes(
-          altSrc,
+          altSrc
         )
       ) {
         $(".navbar-brand img").attr("src", altSrc);
@@ -117,7 +116,7 @@ window.Wiki = class Wiki {
     $("pre code")
       .parent("pre")
       .prepend(
-        `<button title="Copy Code" class="btn copy-btn" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button>`,
+        `<button title="Copy Code" class="btn copy-btn" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button>`
       );
 
     $(".copy-btn").on("click", function () {

wiki/wiki/doctype/wiki_page/templates/web_sidebar.html

@@ -1,12 +1,7 @@
 {% macro render_sidebar_item(item) %}
-<li
-  class="sidebar-item sidebar-group-item {% if item.route == current_route %}sidebar-item-active{% endif %}"
-  data-type="{{item.type}}"
-  data-name="{{item.name}}"
-  data-title="{{item.title or item.name}}"
-  data-group-name="{{item.group_name or 'sidebar-item'}}"
-  data-route="{{ item.route }}"
->
+<li class="sidebar-item sidebar-group-item {% if item.route == current_route %}sidebar-item-active{% endif %}"
+  data-type="{{item.type}}" data-name="{{item.name}}" data-title="{{item.title or item.name}}"
+  data-group-name="{{item.group_name or 'sidebar-item'}}" data-route="{{ item.route }}">
   <div>
     <a class="text-sm sidebar-group-item-title" href="/{{ item.route }}">
       {{ item.title or item.name }}
@@ -17,119 +12,54 @@
 sidebar_items | len > 0 -%}
 <ul class="list-unstyled sidebar-group-list" style="min-height: 20px">
   {% for sidebar_group in sidebar_items -%}
-  <li
-    class="sidebar-group"
-    data-type="Wiki Sidebar"
-    data-title="{{sidebar_group}}"
-  >
+  <li class="sidebar-group" data-type="Wiki Sidebar" data-title="{{sidebar_group}}">
     <div class="sidebar-group-container collapsible">
       <span class="sidebar-group-title">{{ sidebar_group }}</span>
-      <span
-        class="add-sidebar-page hide"
-        data-group-name="{{ sidebar_group }}"
-        data-toggle="tooltip"
-        data-placement="top"
-        title="New Wiki Page in the group {{ sidebar_group }}"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="feather feather-plus"
-        >
+      <span class="add-sidebar-page hide" data-group-name="{{ sidebar_group }}" data-toggle="tooltip"
+        data-placement="top" title="New Wiki Page in the group {{ sidebar_group }}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="feather feather-plus">
           <line x1="12" y1="5" x2="12" y2="19"></line>
           <line x1="5" y1="12" x2="19" y2="12"></line>
         </svg>
       </span>
       <span
-        class="drop-icon {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}rotate{% endif %}"
-      >
-        <svg
-          viewBox="0 0 24 24"
-          width="16"
-          height="16"
-          stroke="currentColor"
-          stroke-width="2"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="css-i6dzq1"
-        >
+        class="drop-icon {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}rotate{% endif %}">
+        <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"
+          stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
           <polyline points="6 9 12 15 18 9"></polyline>
         </svg>
       </span>
     </div>
-    <ul
-      class="list-unstyled sidebar-group-item-list {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}hidden{% endif %}"
-      style="min-height: 20px"
-    >
+    <ul class="list-unstyled sidebar-group-item-list hidden" style="min-height: 20px">
       {% for item in sidebar_items[sidebar_group] -%} {{
       render_sidebar_item(item) }} {%- endfor %}
     </ul>
   </li>
   {%- endfor %}
 </ul>
 <div class="d-none d-lg-block sidebar-options">
-  <div
-    class="sidebar-edit-mode-btn text-muted"
-    data-toggle="tooltip"
-    data-placement="top"
-    title="Changes to sidebar will be automatically saved"
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-edit-3"
-    >
+  <div class="sidebar-edit-mode-btn text-muted" data-toggle="tooltip" data-placement="top"
+    title="Changes to sidebar will be automatically saved">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3">
       <path d="M12 20h9"></path>
       <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
     </svg>
     <span class="small">Edit Sidebar</span>
   </div>
   <div class="add-sidebar-group text-muted hide">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-plus"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
       <line x1="12" y1="5" x2="12" y2="19"></line>
       <line x1="5" y1="12" x2="19" y2="12"></line>
     </svg>
     <span class="small">Add Group</span>
   </div>
   <div class="sidebar-view-mode-btn text-muted hide">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-sidebar"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sidebar">
       <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
       <line x1="9" y1="3" x2="9" y2="21"></line>
     </svg>
@@ -139,13 +69,11 @@
 {%- endif -%} {% endmacro %} {% macro my_account() %}
 <ul class="list-unstyled management">
   <li class="sidebar-item">
-    <a class="new-wiki-page text-muted" href="placeholder_link"
-      >{{ _("Add a new page") }}</a
-    >
+    <a class="new-wiki-page text-muted" href="placeholder_link">{{ _("Add a new page") }}</a>
   </li>
 </ul>
 {% endmacro %}
 
 <div class="web-sidebar" data-name="{{wiki_search_scope}}">
   <div class="sidebar-items">{{ render_sidebar_items(sidebar_items) }}</div>
-</div>
+</div>