hippie/source/screens/demo/examples/ui/explorer.liquid

---
title: Explorer
tags:
- ui
---
{% assign bodyClass = 'body_frame' -%}
{% layout 'hippie/app.liquid' %}

{% block body %}
{% render 'hippie/partials/frame-header.liquid' %}
<main class="io">
	<aside class="io">
		<nav>
			<span>location-pane</span>
			<ul class="vertical">
				<li>
					<a class="a_button" href="">
						<span>Start/Home</span>
						<i class="bi bi-pin-fill"></i>
					</a>
				</li>
				<li>
					<a class="a_button" href="">
						<span>System</span>
						<i class="bi bi-pin-fill"></i>
					</a>
				</li>
			</ul>
		</nav>
		<hr>
		<nav>
			<ul class="vertical">
				<li>
					<a class="a_button" href="">
						<span>💽 disc link</span>
					</a>
				</li>
				<li>
					<a class="a_button" href="">
						<span>📁 folder link</span>
					</a>
				</li>
				<li>
					<a class="a_button" href="">
						<span>🔗 location link</span>
					</a>
				</li>
			</ul>
		</nav>
	</aside>
	<section>
		<header class="io">
			<nav>
				<button title="back">
					<i class="bi bi-caret-left"></i>
				</button>
				<button title="up">
					<i class="bi bi-caret-up"></i>
				</button>
				<button title="forward">
					<i class="bi bi-caret-right"></i>
				</button>
				<button title="reload">
					<i class="bi bi-arrow-clockwise"></i>
				</button>
				<input placeholder="//" type="text">
			</nav>
			<nav>
				<span>location-bar</span>
				<hr class="vertical">
				<button title="search">
					<i class="bi bi-search"></i>
				</button>
				<input placeholder="*" type="text">
			</nav>
		</header>
		<header class="io">
			<nav>
				<button title="add">
					<i class="bi bi-plus-circle"></i>
				</button>
				<div class="spacer a"></div>
				<button title="cut">
					<i class="bi bi-scissors"></i>
				</button>
				<button title="copy">
					<i class="bi bi-copy"></i>
				</button>
				<button title="paste">
					<i class="bi bi-clipboard-check-fill"></i>
				</button>
				<div class="spacer b"></div>
				<button title="delete">
					<i class="bi bi-trash"></i>
				</button>
			</nav>
			<hr class="vertical">
			<nav>
				<ul>
					<li>
						<button title="collapse">
							<i class="bi bi-arrows-collapse"></i>
						</button>
					</li>
					<li>
						<button title="expand">
							<i class="bi bi-arrows-expand-vertical"></i>
						</button>
					</li>
				</ul>
				<span>options-bar</span>
			</nav>
			<nav></nav>
		</header>
		<div id="content">
			<table>
				<thead>
				<tr>
					<th>name</th>
					<th>date</th>
					<th>type</th>
					<th>size</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>folder</td>
					<td>YYYY-MM-DD</td>
					<td>folder</td>
					<td>4KB</td>
				</tr>
				<tr>
					<td>file</td>
					<td>YYYY-MM-DD</td>
					<td>folder</td>
					<td>1B</td>
				</tr>
				</tbody>
			</table>
		</div>
		{% render 'hippie/partials/frame-status.liquid' %}
	</section>
</main>
{% render 'hippie/partials/frame-mode.liquid' %}
{% endblock %}