<p><ahref="#R-image-c4b0b96f998a3dba713a2c1242319842"class="lightbox-link"><imgalt="Topbar on mobile devices"class="bg-white border lazy lightbox noshadow figure-image"loading="lazy"src="/hugo-theme-relearn/basics/topbar/topbar-closed.png"style=" height: auto; width: auto;"></a>
<ahref="javascript:history.back();"class="lightbox-back"id="R-image-c4b0b96f998a3dba713a2c1242319842"><imgalt="Topbar on mobile devices"class="bg-white border lazy lightbox noshadow lightbox-image"loading="lazy"src="/hugo-theme-relearn/basics/topbar/topbar-closed.png"></a></p>
<p>Nevertheless, yer requirements may differ from this configurat'n. Luckily th' theme got ye covered as th' themebar, its buttons an' th' functionality behind these buttons be fully configur'ble by ye.</p>
<li><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html"target="_blank"><strong>start</strong></a>: shown between menu an' breadcrumb</li>
<li><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html"target="_blank"><strong>end</strong></a>: shown on th' opposite breadcrumb side 'n comparison t' th' <em>start</em> area</li>
<p>While ye can not add additional areas 'n th' topbar, ye be free t' configure addtional buttons that behave like th' <em>more</em> button, provid'n further user defined areas.</p>
<h2id="buttons">Buttons</h2>
<p>Th' theme ships wit' th' follow'n predefined buttons (from left t' right 'n th' screenshot)</p>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-bars"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/sidebar.html"target="_blank"><strong>sidebar</strong></a>: opens th' sidebar flyout if 'n mobile layout</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-list-alt"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html"target="_blank"><strong>toc</strong></a>: opens th' t'ble o' contents 'n an overlay</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-chevron-left"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/prev.html"target="_blank"><strong>prev</strong></a>: browses t' th' previous plank if there be one</li>
<li><spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-chevron-right"></i></span></span><ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/next.html"target="_blank"><strong>next</strong></a>: browses t' th' next plank if there be one</li>
<p>Not all buttons be displayed at every given time. This be configur'ble (see below if interested).</p>
<h2id="redefining-areas">Redefin'n Areas</h2>
<p>Each predefined area an' button comes 'n their own file. By that it be easy fer ye t' overwrite an area file 'n yer installat'n reus'n only th' buttons ye like.</p>
<p>Eg. ye can redefine th' predefined <em>end</em> area by add'n th' file <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html"target="_blank"><code>layouts/partials/topbar/area/end.html</code></a> 'n yer installat'n (not 'n th' theme itself) t' remove all but th' <em>more</em> button.</p>
<p>Th' below example sets an explicit value fer th' <code>onempty</code> parameter, overrid'n th' specific default value fer this button (these defaults vary depend'n on th' button). Th' parameter causes th' <em>more</em> button t' always be displayed instead o' hid'n once its rrrambl'n be empty.</p>
</span></span><spanclass="line"><spanclass="cl"><spanclass="p">)}}</span></span></span></code></pre></div><h2id="defining-own-buttons">Defin'n own Buttons</h2>
<h3id="button-types">Button Types</h3>
<p>Th' theme distingushies between two types o' buttons:</p>
<li><ahref="/hugo-theme-relearn/pir/basics/topbar/index.html#button"><strong>button</strong></a>: a click'ble button that either browses t' another ship, triggers a user defined script or opens an overlay contain'n user defined rrrambl'n</li>
<li><ahref="/hugo-theme-relearn/pir/basics/topbar/index.html#area-button"><strong>area-button</strong></a>: th' template fer th' <spanclass="btn cstyle transparent"><span><iclass="fa-fw fas fa-ellipsis-v"></i></span></span><em>more</em> button, t' define yer own area overlay buttons</li>
<p>Depend'n on th' screen width ye can configure how th' button should behave. Screen width be divided into three classes:</p>
<ul>
<li><strong>s</strong>: (controlled by th' <code>onwidths</code> parameter) mobile layout whar' th' menu sidebar be hidden</li>
<li><strong>m</strong>: (controlled by th' <code>onwidthm</code> parameter) desktop layout wit' vis'ble sidebar while th' rrrambl'n area width still resizes</li>
<li><strong>l</strong>: (controlled by th' <code>onwidthl</code> parameter) desktop layout wit' vis'ble sidebar once th' rrrambl'n area reached its maximum width</li>
</ul>
<p>For each width class, ye can configure one o' th' follow'n act'ns:</p>
<li><code>show</code>: th' button be displayed 'n its given area</li>
<li><code>hide</code>: th' button be removed</li>
<li><code>area-XXX</code>: th' button be moved from its given area into th' area <code>XXX</code>; eg. this be used t' move buttons t' th' <em>more</em> area overlay 'n th' mobile layout</li>
<p>While hid'n a button dependend on th' screen size can be configured wit' th' above described <em>hide</em> act'n, ye may want t' hide th' button on certain other condit'ns aswell.</p>
<p>For example, th' <em>print</em> button 'n its default configurat'n should only be displayed if print support was configured. This be done 'n yer button template by check'n th' condit'ns first before display'n th' button (see <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html"target="_blank"><code>layouts/partials/topbar/button/print.html</code></a>).</p>
<p>Another prefered condit'n fer hid'n a button be, if th' displayed overlay be empty. This be th' case fer th' <em>toc</em> (see <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html"target="_blank"><code>layouts/partials/topbar/button/toc.html</code></a>) aswell as th' <em>more</em> button (see <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html"target="_blank"><code>layouts/partials/topbar/button/more.html</code></a>) an' controlled by th' parameter <code>onempty</code>.</p>
<p>If ye want t' dis'ble a button contain'n <em>no overlay</em>, this can be achieved by an empty <code>href</code> parameter. An example can be seen 'n th' <em>prev</em> button (see <code>layouts/partials/topbar/button/prev.html</code>) whar' th' URL fer th' previous ship may be empty.</p>
<p>Contains th' basic button functionality an' be used as a base implementat'n fer all other buttons (<ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/func/button.html"target="_blank"><code>layouts/partials/topbar/func/button.html</code></a>).</p>
<p>Call this from yer own button templates if ye want t' implement a button without an overlay like th' <em>print</em> button (<ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html"target="_blank"><code>layouts/partials/topbar/button/print.html</code></a>) or wit' an overlay contain'n arbitrary rrrambl'n like th' <em>toc</em> button (<ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html"target="_blank"><code>layouts/partials/topbar/button/toc.html</code></a>).</p>
<td>Either th' destinat'n URL fer th' button or JavaScript code t' be executed on click.<br><br>- if start'n wit' <code>javascript:</code> all follow'n text will be executed 'n yer browser<br>- every other str'n will be interpreted as URL<br>- if empty th' button will be displayed 'n disabled state regardless o' its <strong>rrrambl'n</strong></td>
<td>Defines what t' do wit' th' button if th' rrrambl'n parameter was set but ends up empty:<br><br>- <code>dis'ble</code>: Th' button be displayed 'n disabled state.<br>- <code>hide</code>: Th' button be removed.</td>
<td>Th' act'n, that should be executed if th' ship be displayed 'n th' given width:<br><br>- <code>show</code>: Th' button be displayed 'n its given area<br>- <code>hide</code>: Th' button be removed.<br>- <code>area-XXX</code>: Th' button be moved from its given area into th' area <code>XXX</code>.</td>
<p>Contains th' basic functionality t' display area overlay buttons (<ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/func/area-button.html"target="_blank"><code>layouts/partials/topbar/func/area-button.html</code></a>).</p>
<p>Call this from yer own button templates if ye want t' implement a button wit' an area overlay like th' <em>more</em> button (<ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html"target="_blank"><code>layouts/partials/topbar/button/more.html</code></a>).</p>
<td>Defines what t' do wit' th' button if th' rrrambl'n overlay be empty:<br><br>- <code>dis'ble</code>: Th' button be displayed 'n disabled state.<br>- <code>hide</code>: Th' button be removed.</td>
<td>Th' act'n, that should be executed if th' ship be displayed 'n th' given width:<br><br>- <code>show</code>: Th' button be displayed 'n its given area<br>- <code>hide</code>: Th' button be removed.<br>- <code>area-XXX</code>: Th' button be moved from its given area into th' area <code>XXX</code>.</td>
<td>Th' act'n, that should be executed if th' ship be displayed 'n th' given width:<br><br>- <code>show</code>: Th' button be displayed 'n its given area<br>- <code>hide</code>: Th' button be removed.<br>- <code>area-XXX</code>: Th' button be moved from its given area into th' area <code>XXX</code>.</td>
<p>Th' predefined buttons by th' theme that open an overlay (the <em>more</em> an' <em>toc</em> button 'n <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button"target="_blank"><code>layouts/partials/topbar/button</code></a>).</p>
<td>Defines what t' do wit' th' button if th' rrrambl'n overlay be empty:<br><br>- <code>dis'ble</code>: Th' button be displayed 'n disabled state.<br>- <code>hide</code>: Th' button be removed.</td>
<td>Th' act'n, that should be executed if th' ship be displayed 'n th' given width:<br><br>- <code>show</code>: Th' button be displayed 'n its given area<br>- <code>hide</code>: Th' button be removed.<br>- <code>area-XXX</code>: Th' button be moved from its given area into th' area <code>XXX</code>.</td>
