feat: Add basic resizing of sidebar

mkdocs.yml

@@ -4,6 +4,8 @@ repo_url: https://github.com/DanielaValero/second-brain
 docs_dir: 'notes'
 extra_css:
   - assets/css/extra.css
+extra_javascript:
+  - assets/js/extra.js
 theme:
     name: material
     custom_dir: overrides

notes/assets/css/extra.css

@@ -133,6 +133,22 @@ body {
   text-decoration: underline;
 }
 
+.resizable {
+  position: relative;
+  color: black;
+  /* top: 0px !important; */
+}
+
+.resizer-elem {
+  width: 5px;
+  height: 100vh;
+  background: var(--color-highlight--transparent);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: move;
+  top: 0;
+}
 
 /*
 * Headlines in content

notes/assets/js/extra.js

@@ -0,0 +1,34 @@
+const sidebar = document.querySelector('.md-sidebar--primary');
+sidebar.classList.add('js-resizable');
+
+const resizableElem = document.querySelector('.js-resizable');
+resizableElem.classList.toggle('.resizable')
+
+
+const resizer = document.createElement('div');
+resizer.className = 'resizer-elem';
+resizableElem.appendChild(resizer);
+resizer.addEventListener('mousedown', initDrag, false);
+
+
+let startX, startY, startWidth, startHeight;
+
+function initDrag(e) {
+  startX = e.clientX;
+  startY = e.clientY;
+  startWidth = parseInt(document.defaultView.getComputedStyle(resizableElem).width, 10);
+  startHeight = parseInt(document.defaultView.getComputedStyle(resizableElem).height, 10);
+  document.documentElement.addEventListener('mousemove', doDrag, false);
+  document.documentElement.addEventListener('mouseup', stopDrag, false);
+}
+
+function doDrag(e) {
+  resizableElem.style.width = (startWidth + e.clientX - startX) + 'px';
+  resizableElem.style.height = (startHeight + e.clientY - startY) + 'px';
+  console.log(startWidth, e, startX, resizableElem.style.width);
+}
+
+function stopDrag(e) {
+  document.documentElement.removeEventListener('mousemove', doDrag, false);
+  document.documentElement.removeEventListener('mouseup', stopDrag, false);
+}

overrides/partials/nav.html

@@ -14,28 +14,6 @@
   aria-label="{{ lang.t('nav') }}"
   data-md-level="0"
 >
-
-  <!-- Site title -->
-  <!-- <label class="md-nav__title" for="__drawer">
-    <a
-      href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
-      title="{{ config.site_name | e }}"
-      class="md-nav__button md-logo"
-      aria-label="{{ config.site_name }}"
-      data-md-component="logo"
-    >
-      {% include "partials/logo.html" %}
-    </a>
-    {{ config.site_name }}
-  </label> -->
-
-  <!-- Repository information -->
-  {% if config.repo_url %}
-    <div class="md-nav__source">
-      {% include "partials/source.html" %}
-    </div>
-  {% endif %}
-
   <!-- Render item list -->
   <ul class="md-nav__list" data-md-scrollfix>
     {% for nav_item in nav %}