DEV: Adds the ability to set up custom FKB Panel footer links and added a button to hide the FKB Panel

javascripts/discourse/api-initializers/fkb-template.js

@@ -17,6 +17,17 @@ export default {
           }
         },
       });
+      api.onPageChange((url, title) => {
+        const fkbHidden = localStorage.getItem("fkb_panel_hidden") === "true";
+        const fkbVisible = localStorage.getItem("fkb_panel_hidden") === "false";
+        const isHidden = document.body.classList.contains("fkb-panel-hidden");
+
+        if (fkbHidden && !isHidden) {
+          document.body.classList.add("fkb-panel-hidden");
+        } else if (fkbVisible && isHidden) {
+          document.body.classList.remove("fkb-panel-hidden");
+        }
+      });
     });
   },
 };

javascripts/discourse/components/fkb-panel-items.hbs

@@ -0,0 +1,8 @@
+{{#each fkbPanelItems as |fi|}}
+  <DButton
+    @translatedTitle={{fi.title}}
+    @class="fkb-link btn-default btn no-text btn-icon"
+    @href={{fi.link}}
+    @icon={{fi.icon}}
+  />
+{{/each}}

javascripts/discourse/components/fkb-panel-items.js

@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+export default class FKBPanel extends Component {
+  @tracked fkbPanelItems = JSON.parse(settings.fkb_panel_items);
+}

javascripts/discourse/components/fkb-panel-toggle-button.hbs

@@ -0,0 +1,5 @@
+<DButton
+  @class="btn-default btn no-text btn-icon fkb-panel-toggle"
+  @action={{this.toggle}}
+  @icon="chevron-right"
+/>

javascripts/discourse/components/fkb-panel-toggle-button.js

@@ -0,0 +1,15 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+
+export default class FKBPanelHideButton extends Component {
+
+  @action
+  toggle() {
+    const fkbPanelHidden = document.body.classList.contains("fkb-panel-hidden");
+    if (fkbPanelHidden) {
+      return localStorage.removeItem("fkb_panel_hidden", true), document.body.classList.remove("fkb-panel-hidden");
+    } else {
+      return localStorage.setItem("fkb_panel_hidden", true), document.body.classList.add("fkb-panel-hidden");
+    }
+  } 
+}

javascripts/discourse/templates/connectors/discovery-below/fkb-panel-sidebar.hbs

@@ -66,11 +66,7 @@
 
     {{#if user}}
       <div class="fkb-panel-contents-bottom">
-        <a class="fkb-link btn-default btn no-text btn-icon" href="/u/{{user}}/summary">{{d-icon "user"}}</a>
-        <a class="fkb-link btn-default btn no-text btn-icon" href="/u/{{user}}/preferences/account">{{d-icon "cog"}}</a>
-        <a class="fkb-link btn-default btn no-text btn-icon" href="/u/{{user}}/activity/drafts">{{d-icon "pencil-alt"}}</a>
-        <a class="fkb-link btn-default btn no-text btn-icon" href="/u/{{user}}/activity/bookmarks">{{d-icon "bookmark"}}&nbsp;{{userBookmarkCount}}</a>
-        <a class="fkb-link btn-default btn no-text btn-icon" href="/u/{{user}}/messages">{{d-icon "envelope"}}</a>
+        <FkbPanelItems />
       </div>
     {{/if}}
 
@@ -88,5 +84,7 @@
         <DButton @class="btn-primary sign-up-button" @action={{route-action "showCreateAccount"}} @label="sign_up" />
       </div>
     {{/unless}}
+
+    <FkbPanelToggleButton />
   </div>
 {{/unless}}

scss/desktop/fkb-d-fkb-panel.scss

@@ -9,6 +9,11 @@
   max-height: calc(100vh - 6em);
   width: var(--d-sidebar-width);
   @include bg-br;
+  transition: margin-right 0.25s;
+  body.fkb-panel-hidden & {
+    position: fixed;
+    right: -100%;
+  }
   .fkb-panel {
     display: none;
     margin-bottom: 0.5em;
@@ -183,5 +188,13 @@
         font-size: 0.9em;
       }
     }
+    button.fkb-panel-toggle {
+      position: fixed;
+      bottom: 1em;
+      right: 1em;
+      body.fkb-panel-hidden & {
+        transform: rotate(180deg);
+      }
+    }
   }
 }

settings.yml

@@ -19,10 +19,12 @@ topic_image_backdrop_blur:
 topic_image_backdrop_brightness: 
   default: "0.65"
   description: "Change the topic_image_backdrop brightness size. Set a lower value for less bright backdrop image."
+
 right_sidebar_blocks_enabled:
   type: bool
   default: false
   description: "Enabling this will add Right Sidebar Blocks theme component support and replace the original fkb panel with it."
+
 custom_sidebar_enabled:
   type: bool
   default: false
@@ -40,6 +42,34 @@ custom_sidebar_description:
             ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
             in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   description: "Custom sidebar description for visitors. (HTML allowed)"
+
+fkb_panel_items:
+  default: >-
+    [{"title":"Summary","link":"/my/summary","icon":"user"},
+    {"title":"Settings","link":"/my/preferences/account","icon":"cog"},
+    {"title":"Drafts","link":"/my/activity/drafts","icon":"pencil-alt"},
+    {"title":"Bookmarks","link":"/my/activity/bookmarks","icon":"bookmark"},
+    {"title":"Messages","link":"/my/messages","icon":"envelope"}]
+  json_schema: >-
+    {
+      "type": "array",
+      "uniqueItems": true,
+      "items": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string"
+          },        
+          "link": {
+            "type": "string"
+          },
+          "icon": {
+            "type": "string"
+          }
+        },
+        "additionalProperties": false
+      }
+    }
 fkb_panel_show_solutions:
   type: bool
   default: false