Filter [ left ] panel: HTML/CSS only

[dragontheory]

The filter panel is just yet another list with the same HTML structure as the rest of the lists in the other panels, with the exception of the different number of <list-cell>s for each <list-item>. The numbers "[ 1235 ]" for each <list-item> indicate the number of current search result <list-item>s (center panel) that match that filter. (Meta-tags anyone? See Google and Facebook articles below.)

For example:
The first filter <list-item> number indicates that 1235 current search result <list-item>s (center panel) match the first filter <list-item>.

The second filter <list-item> number indicates that 12 current search results <list-item>s (center panel) match the second <list-item>.

...and so on.

The numbers for each filter <list-item> are based on the total number of current search result <list-item>s in the center panel.

Each time a filter <list-item> is checked, the number of search results <list-item>s are filtered in the center panel. Thus each time a filter <list-item> is checked, the numbers of each filter <list-item> changes also.

Google search API example
https://serpapi.com/search-api

Facebook big data example
https://www.simplilearn.com/how-facebook-is-using-big-data-article

Each section of filter <list-item>s is grouped via a <panel-list>.

Each section will be able to be toggled vertically open/close via clicking the <panel-header> with CSS.

This is the same for both the filter panel and the aside/details/profile panel.

Had to use <label> to get checkbox click for toggle.

NOTE [ 2022.08.07 ] : Still need hover styles for labels.

<app-panel>
<input id="filer01" type="checkbox" />
<label for="filer01">
  <panel-title>SECTION 01</panel-title>
  <panel-meta>[ 843 ]</panel-meta>
</label>
<panel-list>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 1235 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 12 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 35 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 5 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 25 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 984 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 984 ]</list-cell>
  </list-item>
</panel-list>
<p>&#160;</p>
<input id="filer02" type="checkbox" />
<label for="filer02">
  <panel-title>SECTION 02</panel-title>
  <panel-meta>[ 843 ]</panel-meta>
</label>
<panel-list>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 1235 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 12 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 35 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 5 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 25 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 984 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 984 ]</list-cell>
  </list-item>
</panel-list>
<p>&#160;</p>
<input id="filer03" type="checkbox" />
<label for="filer03">
  <panel-title>SECTION 03</panel-title>
  <panel-meta>[ 843 ]</panel-meta>
</label>
<panel-list>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 1235 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 12 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 35 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 5 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 25 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 984 ]</list-cell>
  </list-item>
  <list-item>
    <list-cell><input type="checkbox" /></list-cell>
    <list-cell>Nav Item</list-cell>
    <list-cell>[ 984 ]</list-cell>
  </list-item>
</panel-list>
</app-panel>

CSS:

label,
panel-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
  align-items: start;
  cursor: pointer;
}

app-panel > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
app-panel > input[type="checkbox"] + label + panel-list {max-height: 0;}

app-panel > input[type="checkbox"]:checked + label + panel-list {max-height: 100%;}