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

Add new Badge parameter for sidebar items

Browse source
This commit is contained in:
Korbs 2024-12-22 23:20:56 -05:00
parent fae034b813
commit 33352b8d4c
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
3 changed files with 99 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
config.json
View file

@ -42,6 +42,27 @@
"text": "Components",
"link": "/components/"
},
{
"badge": "New",
"badge_variant": "Note",
"text": "Document Title",
"link": "#"
},
{
"badge": "Outdated",
"badge_variant": "Warning",
"text": "Document Title",
"link": "#"
},
{
"badge": "Deprecated",
"badge_variant": "Dangerous",
"text": "Document Title",
"link": "#"
},
{
"heading": "Heading"
},
{
"text": "Document Title",
"link": "#"

44
src/components/Sidebar.astro
View file

@ -6,14 +6,42 @@ import { SiteSettings, SidebarItems } from '@config'
<div class="sidebar">
<div class="desktop-s">
{SidebarItems.map((item) => (
item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
item.heading ?
<h2>{item.heading}</h2>
:
<a href={
SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link
}>
{item.text}
{() => {
if (item.badge === undefined) {
return null
} else {
return <span class={'sidebar-badge badge-variant-' + item.badge_variant}>{item.badge}</span>
}
}}
</a>
))}
</div>
<details class="mobile-s">
<summary>Menu</summary>
{SidebarItems.map((item) => (
item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
item.heading ?
<h2>{item.heading}</h2>
:
<a href={
SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link
}>
{item.text}
{() => {
if (item.badge === undefined) {
return null
} else {
return <span class={'sidebar-badge badge-variant-' + item.badge_variant}>{item.badge}</span>
}
}}
</a>
))}
</details>
</div>
@ -23,4 +51,14 @@ import { SiteSettings, SidebarItems } from '@config'
var CurrentURLPath = window.location.pathname
document.querySelector('.sidebar a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232'
document.querySelector('.sidebar .mobile-s a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232'
</script>
</script>
<!-- {
()=> {
if (item.badge === "external") {
return <p>Log Out</p>
} else {
return <p>Sign In</p>
}
}
} -->

38
src/styles/index.scss
View file

@ -19,6 +19,13 @@ a {
text-decoration: underline;
}
ul {
padding-left: 24px;
li {
padding: 4px 0px;
}
}
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
@ -263,19 +270,48 @@ header {
h2 {
margin: 12px 0px 12px 12px;
font-size: 18px;
cursor: default;
}
a {
text-decoration: none;
font-size: 14px;
background: transparent;
color: white;
color: rgba(255, 255, 255, 0.75);
border-radius: 6px;
padding: 8px 16px;
border: 1px transparent solid;
&:hover {
border-color: #323232;
}
.sidebar-badge {
background: transparent;
border-radius: 6px;
padding: 2px 4px;
float: right;
display: block;
margin: -3px -6px 0px 0px;
border: 1px white solid;
font-size: 12px;
transform: translate(0px, 1px);
}
.badge-variant-Warning {
border-color: var(--aside-warning);
color: var(--aside-warning);
}
.badge-variant-Note {
border-color: var(--aside-note);
color: var(--aside-note);
}
.badge-variant-Success {
border-color: var(--aside-success);
color: var(--aside-success);
}
.badge-variant-Dangerous {
border-color: var(--aside-dangerous);
color: var(--aside-dangerous);
}
}
}