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}}