tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

docs: Improve header + sidebar

Browse Source 
docs: Create workflows
lib: Start pagination
This commit is contained in:
venashial
2022-03-12 01:34:09 -08:00
parent de536d7305
commit b69ff6ca8a
28 changed files with 445 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/routes/_internal/components/Sidebar.svelte Normal file
View File

@@ -0,0 +1,53 @@
<nav class="sidebar">
<div class="section">
<span class="section__title">Getting started</span>
<a href="/" class="section__link">Introduction</a>
<a href="/getting-started/icons" class="section__link">Using Icons</a>
<a href="/getting-started/css" class="section__link">CSS configuration</a>
</div>
<div class="section">
<span class="section__title">Components</span>
{#each ['buttons', 'pagination'] as component}
<a href="/components/{component}" class="section__link">{component}</a>
{/each}
</div>
</nav>
<style lang="postcss">
.sidebar {
display: flex;
flex-direction: column;
grid-gap: 2rem;
background-color: hsl(220, 15%, 40%);
color: hsl(216, 10%, 80%);
padding: 5.5rem 1.5rem 1.5rem;
height: 100vh;
width: calc(var(--sidebar-width) - 3rem);
position: fixed;
left: 0;
top: 0;
.section {
display: flex;
flex-direction: column;
grid-gap: 0.5rem;
&__title {
text-transform: uppercase;
font-size: 12px;
}
&__link {
text-transform: capitalize;
color: hsl(216, 10%, 90%);
text-decoration: none;
&:hover {
color: white;
text-decoration: underline;
}
}
}
}
</style>