History sidebar

by Eugene Trounev

HTML

<link rel="stylesheet" href="https://appcdn2.docsie.io/js/manager/staging/css/manager.css">
<div class="pure docsie docsie-blue">
  <div class="docsie-editor-with-menu">
    <div class="docsie-g docsie-g-row docsie-g-nowrap book-editor">
      <div
        class="content docsie-u docsie-border-left docsie-border-right docsie-border-2x"
      ></div>
      <nav
        class="sidebar docsie-sticky docsie-g docsie-g-row docsie-g-nowrap menu-expandable docsie-txt-small"
        style="top: 0px; height: 100vh"
      >
        <div class="docsie-u">
          <div
            class="docsie-full-height"
            style="
              position: relative;
              user-select: auto;
              width: 320px;
              height: 100vh;
              max-width: 320px;
              min-width: 200px;
              box-sizing: border-box;
              flex-shrink: 0;
            "
          >
            <div class="docsie-menu box docsie-full-height docsie-overflow-y">
              <div>
                <h3><span>Article history</span></h3>
                <div class="h-box v-space">
                  <button
                    class="docsie-button docsie-ellipsis docsie-button-fill docsie-button-small"
                  >
                    <span class="docsie-ellipsis">Compare selected</span>
                  </button>
                </div>
                <div class="h-box">
                  <table
                    class="docsie-u-1 docsie-table docsie-table-horizontal docsie-table-frameless docsie-txt-small docsie-form"
                  >
                    <thead>
                      <tr>
                        <th></th>
                        <th>ver</th>
                        <th class="docsie-txt-right">updated</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="docsie-txt-center">
                       ...

SCSS

.docsie {
.docsie-project {
	[class*="docsie-project-state-"] {
    font-weight: 600;
		border: none;
    color: white;
	}
	.docsie-project-state-none {
		background-color: #dfe6ec;
    color: black;
	}
	.docsie-project-state-red {
		background-color: #c12d2d;
	}
	.docsie-project-state-yellow {
		background-color: #d36300;
	}
	.docsie-project-state-green {
		background-color: #2dc189;
	}
	.docsie-project-state-blue {
		background-color: #2d78c1;
	}
}
}

JavaScript

fetch(new Request("https://appcdn2.docsie.io/images/icons.svg"), {
  headers: {
    "Content-Type": "text/plain",
  },
}).then((response) => response.text()).then((assets) => {
  const asset = document.createElement("div");
  asset.style.display = "none";
  asset.innerHTML = assets;
  document.body.append(asset);
});