github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-gutter-menu.hbs (about)

     1  {{#freestyle-usage "gutter-nav" title="Gutter Menu"}}
     2    <div class="columns">
     3      <div class="column is-4">
     4        <div class="gutter">
     5          <aside class="menu">
     6            <p class="menu-label">Places</p>
     7            <ul class="menu-list">
     8              <li><a href="#" class="is-active">Place One</a></li>
     9              <li><a href="#">Place Two</a></li>
    10            </ul>
    11  
    12            <p class="menu-label">Features</p>
    13            <ul class="menu-list">
    14              <li><a href="#">Feature One</a></li>
    15              <li><a href="#">Feature Two</a></li>
    16            </ul>
    17          </aside>
    18        </div>
    19      </div>
    20      <div class="column">
    21        <div class="mock-content">
    22          <div class="mock-vague"></div>
    23        </div>
    24      </div>
    25    </div>
    26  {{/freestyle-usage}}
    27  
    28  {{#freestyle-usage "gutter-nav-rich-components" title="Gutter Navigation with Rich Components"}}
    29    <div class="columns">
    30      <div class="column is-4">
    31        <div class="gutter">
    32          <aside class="menu">
    33            <p class="menu-label">Places</p>
    34            <ul class="menu-list">
    35              <li>
    36                <div class="menu-item">
    37                  {{#power-select
    38                    selected=(or selection "One")
    39                    options=(array "One" "Two" "Three")
    40                    onChange=(action (mut selection))
    41                    as |option|}}
    42                    {{option}}
    43                  {{/power-select}}
    44                </div>
    45              </li>
    46              <li><a href="#" class="is-active">Place One</a></li>
    47              <li><a href="#">Place Two</a></li>
    48            </ul>
    49  
    50            <p class="menu-label">Features</p>
    51            <ul class="menu-list">
    52              <li><a href="#">Feature One</a></li>
    53              <li><a href="#">Feature Two</a></li>
    54            </ul>
    55          </aside>
    56        </div>
    57      </div>
    58      <div class="column">
    59        <div class="mock-content">
    60          <div class="mock-vague"></div>
    61        </div>
    62      </div>
    63    </div>
    64  {{/freestyle-usage}}
    65  {{#freestyle-annotation}}
    66    In order to keep the gutter navigation streamlined and easy to navigation, rich components should be avoided when possible. When not possible, they should be kept near the top.
    67  {{/freestyle-annotation}}
    68  
    69  {{#freestyle-usage "gutter-nav-many-items" title="Hypothetical Gutter Navigation with Many Items"}}
    70    <div class="columns">
    71      <div class="column is-4">
    72        <div class="gutter">
    73          <aside class="menu">
    74            <p class="menu-label">Places</p>
    75            <ul class="menu-list">
    76              {{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}}
    77                <li><a href="#">Place {{item}}</a></li>
    78              {{/each}}
    79            </ul>
    80  
    81            <p class="menu-label">Features</p>
    82            <ul class="menu-list">
    83              {{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}}
    84                <li><a href="#">Feature {{item}}</a></li>
    85              {{/each}}
    86            </ul>
    87  
    88            <p class="menu-label">Other</p>
    89            <ul class="menu-list">
    90              <li><a href="#" class="is-active">The one that didn't fit in</a></li>
    91            </ul>
    92  
    93            <p class="menu-label">Things</p>
    94            <ul class="menu-list">
    95              {{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}}
    96                <li><a href="#">Thing {{item}}</a></li>
    97              {{/each}}
    98            </ul>
    99          </aside>
   100        </div>
   101      </div>
   102      <div class="column">
   103        <div class="mock-content">
   104          <div class="mock-vague"></div>
   105        </div>
   106      </div>
   107    </div>
   108  {{/freestyle-usage}}
   109  {{#freestyle-annotation}}
   110    There will only ever be one gutter menu in the Nomad UI, but it helps to imagine a situation where there are many navigation items in the gutter.
   111  {{/freestyle-annotation}}
   112  
   113  {{#freestyle-usage "gutter-nav-icon-items" title="Hypothetical Gutter Navigation with Icon Items"}}
   114    <div class="columns">
   115      <div class="column is-4">
   116        <div class="gutter">
   117          <aside class="menu">
   118            <p class="menu-label">Places</p>
   119            <ul class="menu-list">
   120              <li><a href="#">{{x-icon "clock"}} Place One</a></li>
   121              <li><a href="#" class="is-active">{{x-icon "history"}} Place Two</a></li>
   122            </ul>
   123  
   124            <p class="menu-label">Features</p>
   125            <ul class="menu-list">
   126              <li><a href="#">{{x-icon "warning"}} Feature One</a></li>
   127              <li><a href="#">{{x-icon "media-pause"}} Feature Two</a></li>
   128            </ul>
   129          </aside>
   130        </div>
   131      </div>
   132      <div class="column">
   133        <div class="mock-content">
   134          <div class="mock-vague"></div>
   135        </div>
   136      </div>
   137    </div>
   138  {{/freestyle-usage}}
   139  {{#freestyle-annotation}}
   140    In the future, the gutter menu may have icons.
   141  {{/freestyle-annotation}}
   142  
   143  {{#freestyle-usage "gutter-nav-global" title="Global Gutter Navigation"}}
   144    <div class="columns">
   145      <div class="column is-4">
   146        {{#gutter-menu}}
   147          {{!-- Page content here --}}
   148        {{/gutter-menu}}
   149      </div>
   150    </div>
   151  {{/freestyle-usage}}
   152  {{#freestyle-annotation}}
   153    <p>Since there will only ever be one gutter menu in the UI, it makes sense to express the menu as a singleton component. This is what that singleton component looks like.</p>
   154  
   155    <p><strong>Note:</strong> Normally the gutter menu is rendered within a page layout and is fixed position. The columns shown in this example are only to imitate the actual width without applying fixed positioning.</p>
   156  {{/freestyle-annotation}}