Korbs/butterflyvu
1
Fork 0
Code Issues Pull requests Packages 1 Activity

Compare commits

base: Korbs:05c5b92c10f8ec3c71700645d77f18027f58388e
Branches Tags
Korbs:master
Korbs:luminosity
...
compare: Korbs:aadfb3fb2eddf0748c0c6e5baf3c5d96da68c54c
Branches Tags
Korbs:master
Korbs:luminosity

6 commits
05c5b92c10 ... aadfb3fb2e

Author SHA1 Message Date
Korbs
aadfb3fb2e update list 2024-06-10 01:26:39 -04:00
Korbs
7f38c279b6 Add configuration for the Sidebar component 2024-06-10 01:26:34 -04:00
Korbs
89a894ea72 Add header links 2024-06-10 01:26:20 -04:00
Korbs
232d4a161a Create Sidebar component 2024-06-10 01:26:09 -04:00
Korbs
7c4c7eb40b Remove comment and add Sidebar component 2024-06-10 01:25:56 -04:00
Korbs
60c6d7cfc7 Adjust header and table 2024-06-10 01:25:11 -04:00
6 changed files with 61 additions and 29 deletions
Show stats Expand all files Collapse all files

2
TODO.md
View file

@ -16,7 +16,7 @@
- [ ] Steps
- [ ] Tabs
- [ ] Sidebar
- [ ] Make configurable
- [x] Make configurable
- [ ] Multi
- [ ] Closable
- [ ] Mobile friendly

27
sidebar.json Normal file
View file

@ -0,0 +1,27 @@
{
"SidebarItems": [
{
"heading": "Heading"
},
{
"text": "Document Title",
"link": "#"
},
{
"text": "Document Title",
"link": "#"
},
{
"text": "Document Title",
"link": "#"
},
{
"text": "Document Title",
"link": "#"
},
{
"text": "Document Title",
"link": "#"
}
]
}

9
src/components/Sidebar.astro Normal file
View file

@ -0,0 +1,9 @@
---
import { SidebarItems } from '../../sidebar.json'
---
<div class="sidebar">
{SidebarItems.map((item) => (
item.heading ? <h2>{item.heading}</h2> : <a href={item.link}>{item.text}</a>
))}
</div>

5
src/components/global/Header.astro
View file

@ -13,5 +13,10 @@ import {
<div class="start">
<h2><a style="text-decoration: none;" href="/">{SITE_NAME}</a></h2>
</div>
<div class="end">
<a href="#">Link</a>
<a href="#">Social</a>
<a href="#">Status</a>
</div>
</div>
</header>

25
src/layouts/Document.astro
View file

@ -14,7 +14,8 @@ const { Title, Feedback, Feelback } = Astro.props
// Components
import Head from '@components/global/Head.astro'
import Header from '@components/global/Header.astro'
import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro";
import Sidebar from '@components/Sidebar.astro'
import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro"
// Styles
import "@styles/index.scss";
@ -25,23 +26,7 @@ import "@styles/feelback.css";
<Header/>
<div class="page">
<div class="content">
<div class="sidebar">
<h2>Sidebar Header</h2>
<a href="#">Document Title</a>
<a href="#">Document Title</a>
<a href="#">Document Title</a>
<a href="#">Document Title</a>
<h2>Sidebar Header</h2>
<a href="#">Document Title</a>
<a href="#">Document Title</a>
<a href="#">Document Title</a>
<h2>Sidebar Header</h2>
<a href="#">Document Title</a>
<a href="#">Document Title</a>
<a href="#">Document Title</a>
<a href="#">Document Title</a>
<a href="#">Document Title</a>
</div>
<Sidebar/>
<div class="document">
<h1>{Title}</h1>
<slot/>
@ -78,10 +63,6 @@ import "@styles/feelback.css";
</div>
</div>
<!-- Style is temporary here -->
<style is:global lang="scss">
</style>
{REVERT_LAYOUT ?
<style>
.content {

22
src/styles/index.scss
View file

@ -19,12 +19,12 @@ table {
border: 1px solid #111111;
padding: 8px;
}
tr:nth-child(even){background-color: #323232;}
tr:nth-child(even){background-color: #323232;}
tr:nth-child(odd){background-color: #333333;}
tr:nth-child(even){background-color: #141414;}
tr:hover {background-color: #454545;}
th {
padding-top: 12px;
padding-bottom: 12px;
padding-bottom: 12pqx;
text-align: left;
background-color: #070707;
color: white;
@ -52,6 +52,19 @@ header {
.header-content {
max-width: 1200px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
.end {
display: flex;
gap: 6px;
a {
text-decoration: none;
background: #373737;
border-radius: 6px;
padding: 8px 16px;
}
}
}
}
@ -76,9 +89,6 @@ header {
}
}
.document {
background: #232323;
border-radius: 4px;
padding: 12px 24px;
height: max-content;
img {
width: 100%;