git.r.bdr.sh - rbdr/forum/blob - app/components/forum_list/forum_list.svelte

   1 <script>
   2   import { forums } from '../../stores/forums.js';
   3 </script>
   4
   5 <nav title="List of Forums">
   6   <ul>
   7     {#each $forums as forum}
   8       <li>
   9         <a href="/f/{forum.id}">
  10           <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
  11           <span class="navigation-label">{forum.label}</span>
  12         </a>
  13       </li>
  14     {/each}
  15   </ul>
  16 </nav>
  17
  18 <style>
  19   nav {
  20     grid-column: col-start 1;
  21     grid-row: 2;
  22     border-right: 1px solid black;
  23   }
  24
  25   ul {
  26     padding: 0;
  27   }
  28
  29   li {
  30     display: block;
  31     text-align: left;
  32     margin-bottom: 20px;
  33   }
  34
  35   .navigation-glyph {
  36     font-size: 1.5rem;
  37     display: block;
  38   }
  39
  40   .☽ {
  41     font-size: 2rem;
  42   }
  43
  44   a {
  45     text-decoration: none;
  46   }
  47 </style>