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

---
title: GUI explorer
tags:
	- ui
---
{% set pageId = page.fileSlug %}

{% extends "hippie/_app_frame.njk" %}

{% block body %}
	{{ io.frameHeader('title-bar') }}
	<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>
			{{ io.statusBar() }}
		</section>
	</main>
	{{ io.frameFooter('mode-bar') }}
{% endblock %}