ChitoWarlock/soc_site-astro
1
0
Fork 0
mirror of https://github.com/jorgev259/soc_site-astro.git synced 2025-06-29 07:57:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement Sidebar component

Browse source
This commit is contained in:
Jorge Vargas 2025-02-16 00:38:30 -06:00
parent 28a32044f4
commit cfd4fcd957
8 changed files with 56 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,44 @@
---
import { Image } from 'astro:assets'
import discord from 'img/socials/discord.png'
import kofi from 'img/socials/ko-fi-donate-button.png'
import yt from 'img/socials/yt.png'
import twitter from 'img/socials/twitter.png'
import SidebarSection from './sidebar/SidebarSection.astro'
// import Highlight from './sidebar/Highlight.astro'
const listClass =
'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
---
<div class='w-3/12 max-w-[300px] bg-dark flex flex-col'>
<a href='#' class={listClass}>Last Added</a>
<a href='#' class={listClass}>Get Lucky</a>
<a href='#' class={listClass}>Random Pull</a>
<div class='px-6 flex flex-col gap-y-3'>
<SidebarSection class='flex flex-col gap-y-3'>
<div class='flex gap-x-2 justify-center'>
<a href='https://www.youtube.com/channel/UCb1Q0GuOa8p_7fY-pYnWCmQ' target='_blank' rel='noopener noreferrer'>
<Image class='rounded-md' src={yt} alt='youtube' />
</a>
<a href='https://twitter.com/SittingOnCloud' target='_blank' rel='noopener noreferrer'>
<Image class='rounded-md' src={twitter} alt='twitter' />
</a>
</div>
<div>
<a href='https://discord.gg/x23SFbE' target='_blank' rel='noopener noreferrer'>
<Image class='rounded-md' src={discord} alt='Join our Discord!' />
</a>
</div>
<div>
<a href='https://ko-fi.com/sittingonclouds' target='_blank' rel='noopener noreferrer'>
<Image class='rounded-md' src={kofi} alt='Support me on Ko-fi' />
</a>
</div>
</SidebarSection>
<!-- <Highlight /> -->
</div>
</div>

BIN
src/img/socials/discord.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/img/socials/ko-fi-donate-button.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/img/socials/twitter.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/img/socials/yt.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 977 B

4
src/layouts/base.astro
View file

@ -24,9 +24,9 @@ import 'styles/global.css'
<link rel='alternate' type='application/rss+xml' title='Sitting on Clouds' href={new URL('rss.xml', Astro.site)} /> <link rel='alternate' type='application/rss+xml' title='Sitting on Clouds' href={new URL('rss.xml', Astro.site)} />
</head> </head>
<body class='flex flex-col min-h-full m-0 color-'> <body class='flex flex-col min-h-full m-0'>
<Header /> <Header />
<main class='flex-1 bg-soc-green'> <main class='flex flex-1 bg-soc-green'>
<Toaster client:only='react' toastOptions={{ duration: 6000 }} /> <Toaster client:only='react' toastOptions={{ duration: 6000 }} />
<slot /> <slot />
</main> </main>

8
src/pages/index.astro
View file

@ -1,5 +1,11 @@
--- ---
import Sidebar from 'components/Sidebar.astro'
import BaseLayout from 'layouts/base.astro' import BaseLayout from 'layouts/base.astro'
--- ---
<BaseLayout /> <BaseLayout>
<div class='flex flex-1 max-w-[2000px]'>
<div class='flex-1'>Page content goes here</div>
<Sidebar />
</div>
</BaseLayout>

3
src/styles/global.css
View file

@ -1,3 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
* { * {
color: white; color: white;
font-family: 'Rubik', Sans-serif;
} }