MinPluto/Polestar
1
Fork 0
Code Issues Pull requests Activity

Add Sidebar

Browse source
This commit is contained in:
Korbs 2024-08-22 03:42:29 -04:00
parent 1c322cd7bd
commit 64e05d875f
1 changed files with 148 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
src/Sidebar.astro Normal file
View file

@ -0,0 +1,148 @@
---
// Properties
const { ShowHeader, LogoPath, ShowVersion, FooterLinks, Size } = Astro.props;
// Components
import { Image } from "astro:assets";
---
<div class="fl-sidebar">
<div class="fl-sidebar-top">
{
ShowHeader ? (
<div class="fl-sidebar-header">
<Image
src={LogoPath}
alt="Logo"
inferSize={true}
format="webp"
/>
<div>
<slot name="header-items" />
</div>
</div>
) : null
}
<div class="fl-sidebar-items">
<slot name="top-items" />
</div>
</div>
<div class="fl-sidebar-bottom">
<div class="fl-sidebar-items">
<slot name="bottom-items" />
</div>
<div class="fl-sidebar-footer">
{ShowVersion ? <p id="fl-your-version">v2025.05.16</p> : null}
{
FooterLinks ? (
<div>
<slot name="footer-items" />
</div>
) : null
}
</div>
</div>
</div>
<style lang="scss" is:global>
.fl-sidebar {
background: #121212;
color: white;
max-width: 240px;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0px 12px;
.fl-sidebar-items {
display: grid;
gap: 6px;
h2 {
font-size: 16px;
color: gray;
font-weight: normal;
padding-left: 12px;
pointer-events: none;
}
hr {
width: calc(100% - 24px);
border: none;
background: #363636;
height: 3px;
border-radius: 1rem;
margin: 6px 0px;
}
a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 12px;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
border: 1px transparent solid;
&:hover {
background: #3c3c3c;
border: 1px #5c5c5c solid;
}
}
}
.fl-sidebar-top {
.fl-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 12px;
img {
width: 64px;
height: 64px;
pointer-events: none;
}
a {
color: white;
text-decoration: none;
border-radius: 6px;
cursor: pointer;
border: 1px transparent solid;
padding: 8px;
svg {
transform: translate(0px, 6px);
}
&:hover {
background: #3c3c3c;
border: 1px #5c5c5c solid;
}
}
}
}
.fl-sidebar-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 12px;
* {margin: 0px}
a {
color: white;
text-decoration: none;
border-radius: 6px;
cursor: pointer;
border: 1px transparent solid;
padding: 8px 6px;
aspect-ratio: 1;
svg {
transform: translate(0px, 6px);
}
&:hover {
background: #3c3c3c;
border: 1px #5c5c5c solid;
}
}
}
}
</style>