BrainMinder/assets/templates/partials/sidebar.tmpl

{{define "partial:sidebar"}}
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" id="main-sidebar">
<div id="app-title">
  <a class="w3-hide-large" href="#" onclick="bm_toggle_sidebar('main-sidebar'); return false;">
    <img src="/static/img/brainminder.svg" style="height: 32px; padding-right: 10px;" />
    <span style="font-weight: bold;">B</span>rain<span style="font-weight: bold;">M</span>inder
  </a>
  <a class="w3-hide-small w3-hide-medium" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content">
    <img src="/static/img/brainminder.svg" style="height: 32px; padding-right: 10px;" />
    <span style="font-weight: bold;">B</span>rain<span style="font-weight: bold;">M</span>inder
  </a>
</div>

<div id="main-sidebar-content">
  <div class="w3-bar-block w3-container" id="searchSidebar">
    <form method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" hx-on:submit="bm_sidebar_click('main-sidebar')">
      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
      <div class="row">
        <div class="threequarter">
          <input type="text" id="searchText" name="SearchText" placeholder="Search.." />
        </div>
        <div class="quarter">
          <button type="submit" class="w3-right w3-button w3-round-large w3-metro-dark-blue" style="padding: 4px 8px; margin-top: 5px; margin-right: 8px;"><i class='bi bi-search'></i></button>
        </div>
      </div>
    </form>
</div>

  <div class="sidebar-block">
    <h5 class="w3-text-metro-dark-blue">
      <a hx-get="/" hx-target="#page-content" hx-push-url="true" href="/" hx-on:click="bm_sidebar_click('main-sidebar')"><i class="bi bi-speedometer"></i> Dashboard</a>
    </h5>
  </div>

  <div class="sidebar-block">
    <h5 class="w3-text-metro-dark-blue">
      <i class="bi bi-journals"></i> Notebook
    </h5>
    <form method="POST" action="/" hx-post="/" hx-push-url="true" hx-target="#page-content">
      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
      {{template "partial:notebooks-list" . }}
    </form>
  </div>

  <div class="sidebar-block">
    <h5 class="w3-text-metro-dark-blue accordion" onclick="bm_toggle_visibility('types_menu')">
      <i class="bi bi-list-task"></i> Items <i class='w3-right bi bi-chevron-down types_menu'></i><i class='w3-right bi bi-chevron-up hidden types_menu'></i>
    </h5>
  </div>

  <div id="types_menu" class="sidebar-block hidden">
    {{template "partial:types-list" . }}
    <div class="menu-item">
    <div class="menu-item-title">
      <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/items" hx-target="#page-content" hx-push-url="true" href="/items" hx-on:click="bm_sidebar_click('main-sidebar')">
      <i class="bi bi-list-task"></i> <strong>All</strong>
      </a>
    </div>
    </div>
  </div>
  
  <div class="sidebar-block">
    <h5 class="w3-text-metro-dark-blue accordion" onclick="bm_toggle_visibility('settings_menu')">
      <i class="bi bi-gear-fill"></i> Settings <i class='w3-right bi bi-chevron-down settings_menu'></i><i class='w3-right bi bi-chevron-up hidden settings_menu'></i>
    </h5>
  </div>

  <div id="settings_menu" class="sidebar-block sidebar-menu hidden">
    <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/notebooks" hx-target="#page-content" hx-push-url="true" href="/notebooks" hx-on:click="bm_sidebar_click('main-sidebar')">
      <i class="bi bi-journals"></i> Notebooks
    </a>
    <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/categories" hx-target="#page-content" hx-push-url="true" href="/categories" hx-on:click="bm_sidebar_click('main-sidebar')">
      <i class="bi bi-bookmarks"></i> Categories
    </a>
    <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/types" hx-target="#page-content" hx-push-url="true" href="/types" hx-on:click="bm_sidebar_click('main-sidebar')">
      <i class="bi bi-boxes"></i> Types
    </a>
  </div>

  <div class="sidebar-block">
    <h5 class="w3-text-metro-dark-blue">
    <a href="/logout"><i class="bi bi-box-arrow-left"></i></i> Logout</a>
    </h5>
  </div>
</div>
</nav>

{{ end }}