Adds tabs for calendar, graph and backlinks in right sidebar

editor/src/index.js

@@ -95,3 +95,19 @@ $(document).on('click', '.calendar-update', function (event) {
         })
     return false
 })
+
+function activateTab(tab) {
+    console.log(tab)
+    $('.tabs .tab-page').toggleClass('tab-active', false);
+    $($(tab).data('target')).toggleClass('tab-active', true);
+    $('.tab-bar .tab').toggleClass('tab-active', false)
+    $(tab).toggleClass('tab-active', true)
+}
+
+$(document).on('click', '.tab', function () {
+    activateTab(this)
+});
+
+$(function () {
+    activateTab($('.tab-bar .tab-active')[0]);
+});

editor/src/styles.scss

@@ -569,3 +569,41 @@ input.input-line, input.input-line:active {
   text-decoration-skip: leading-spaces;
   color: #999;
 }
+
+
+.tabs {
+    width: 100%;
+}
+
+.tab-bar {
+    display: flex;
+    border-bottom: 1px solid black;
+}
+
+.tab-bar .tab {
+    padding: 8px 16px;
+    cursor: pointer;
+
+    border-bottom: 3px solid white;
+}
+.tab-bar .tab:first-child {
+    margin-left: 24px;
+}
+
+.tab-bar .tab.tab-active {
+    border-bottom: 3px solid black;
+}
+.tab-bar .tab + .tab {
+    margin-left: 24px;
+}
+
+.tab-page {
+    display: none;
+}
+
+.tab.tab-active {
+}
+
+.tab-page.tab-active {
+    display: block;
+}

templates/sidebar-right.html

@@ -1,12 +1,48 @@
 {{ define "sidebar-right" }}
 <div class="sidebar-right">
-    {{block "calendar" .}}
-    {{end}}
+    <div class="tab-bar">
+        <div class="tab tab-active" data-target="#tab-calendar">
+            <span>Calendar</span>
+        </div>
+        <div class="tab" data-target="#tab-graph">
+            <span>Graph</span>
+        </div>
+        <div class="tab" data-target="#tab-linked-refs">
+            <span>Backlinks</span>
+        </div>
+    </div>
+    <div class="tabs">
+        <div class="tab-page" id="tab-calendar">
+            {{block "calendar" .}}
+            {{end}}
+        </div>
 
-    <div class="graph-view">
-        {{ if .ShowGraph }}
-            <div class="graph-network" data-name="{{ .Name }}" style="height:80vh; top:0; position: sticky"></div>
-        {{ end }}
+        <div class="tab-page" id="tab-graph">
+            <div class="graph-view">
+                {{ if .ShowGraph }}
+                    <div class="graph-network" data-name="{{ .Name }}" style="height:80vh; top:0; position: sticky"></div>
+                {{ end }}
+            </div>
+        </div>
+
+        <div class="tab-page" id="tab-linked-refs">
+            {{ if .Backrefs }}
+                <div class="backrefs content">
+                    <h3>Linked references</h3>
+                    <ul>
+                        {{ range $name, $refs := .Backrefs }}
+                            <li><a href="/edit/{{ $name }}">{{ (index $refs 0).Title }}</a>
+                                <ul>
+                                    {{ range $ref := $refs }}
+                                        <li>{{ $ref.LineEditHTML }}</li>
+                                    {{ end }}
+                                </ul>
+                            </li>
+                        {{ end }}
+                    </ul>
+                </div>
+            {{ end }}
+        </div>
     </div>
 </div>
 {{ end }}