jackz/storage
1
0
Fork 0
mirror of https://github.com/Jackzmc/storage.git synced 2025-05-12 03:53:14 +00:00
Code Issues Projects 1 Releases Packages Wiki Activity Actions

Switch to server side templating

Browse source
This commit is contained in:
Jackzie 2025-04-14 21:32:49 -05:00
parent de6301c13b
commit 3147da7643
12 changed files with 402 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

26
server/templates/layouts/main.html.hbs Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>storage-app</title>
<!-- TODO: use static -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
>
</head>
<body>
{{> partials/nav }}
<div class="mx-5 columns">
<div class="column pl-0 sidebar-column">
{{> partials/sidebar }}
</div>
<div class="column is-10">
{{> @partial-block }}
</div>
</div>
</body>
</html>

24
server/templates/partials/nav.html.hbs Normal file
View file

@ -0,0 +1,24 @@
<nav class="navbar mb-4 has-background-white-ter" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<h3 class="title is-3">storage-app</h3>
</a>
<button class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</button>
</div>
<div class="navbar-start">
</div>
<div class="navbar-end">
<div class="navbar-item">
Bell
</div>
<div class="navbar-item">
User
</div>
</div>
</nav>

47
server/templates/partials/sidebar.html.hbs Normal file
View file

@ -0,0 +1,47 @@
<aside class="sidebar pl-0 mb-0">
<p class="sidebar-header">Workspace</p>
<ul class="sidebar-list">
<li class="is-active"><button><Icon icon="akar-icons:copy"></Icon> Files</button></li>
<li><button><Icon icon="akar-icons:heart"></Icon> Favorites</button></li>
<li><button><Icon icon="akar-icons:clock"></Icon> Activities</button></li>
</ul>
<p class="sidebar-header">Help</p>
<ul class="sidebar-list">
<li><button>Help</button></li>
<li><button>About</button></li>
</ul>
</aside>
<script lang="ts">
import Icon from "@iconify/svelte";
</script>
<style>
.sidebar {
}
.sidebar-header {
color: hsl(0, 0%, 48%);
padding-left: 8px;
}
.sidebar-list {
/* margin-top: 2px; */
padding-top: 10px;
padding-left: 5px;
margin-bottom: 25px;
}
.sidebar-list li button {
padding-left: 8px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
border-radius: 2.5px;
/* margin-top: 4px; */
width: 100%;
text-align: left;
}
.sidebar-list li button:hover, .sidebar-list li button.is-active {
background-color: lightgray;
}
</style>