juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add sidebar to the main page

Browse source
This commit is contained in:
Konrad Szwarc 2022-10-22 13:33:42 +02:00
parent f258bc6cb4
commit 41df1d8420
4 changed files with 25 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -52,8 +52,8 @@
"postcss": "8.4.18",
"prettier": "2.7.1",
"tailwindcss": "3.2.1",
"typescript": "4.8.4",
"type-fest": "3.1.0",
"typescript": "4.8.4",
"vite": "3.1.8",
"vite-tsconfig-paths": "3.5.2"
}

8
src/components/atoms/sidebar-item.astro
View file

@ -14,10 +14,10 @@ const { icon, active } = Astro.props;
<button
type="button"
class:list={[
`inline-flex justify-center items-center h-10 w-10 rounded-lg transition hover:bg-primary-600`,
active && 'bg-primary-600',
'inline-flex justify-center items-center h-10 w-10 rounded-lg transition',
active && 'bg-primary-600 text-white',
!active && 'bg-white text-gray-400 hover:bg-primary-600 hover:text-white',
]}
>
<Icon client:load name={icon} size={20} color={active ? 'white' : 'gray'} />
<slot />
<Icon client:load name={icon} size={20} />
</button>

10
src/components/organisms/sidebar.astro
View file

@ -1,3 +1,11 @@
<nav class="flex flex-col w-max p-2 rounded-lg gap-2 bg-white shadow-md">
---
export interface Props {
className: string;
}
const { className } = Astro.props;
---
<nav class:list={['flex flex-col w-max h-fit p-2 rounded-lg gap-2 bg-white shadow-md', className]}>
<slot />
</nav>

14
src/pages/index.astro
View file

@ -1,4 +1,5 @@
---
import SidebarItem from '@/atoms/sidebar-item.astro';
import Sidebar from '@/organisms/sidebar.astro';
import ExperienceSection from '@/sections/experience-section.astro';
import FavoritesSection from '@/sections/favorites-section.astro';
@ -21,8 +22,8 @@ import data from '../data';
<meta name="description" content={data.seo.description} />
</head>
<body class="flex justify-center bg-gray-50">
<div class="flex gap-8 w-full max-w-6xl px-4 py-6 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
<main class="w-full space-y-6 lg:space-y-8">
<div class="flex gap-8 w-full max-w-6xl px-2 py-3 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
<main class="w-full space-y-4 sm:space-y-6 lg:space-y-8">
<MainSection {...data.main} />
{data.skills && <SkillsSection {...data.skills} />}
{data.experience && <ExperienceSection {...data.experience} />}
@ -30,7 +31,14 @@ import data from '../data';
{data.testimonials && <TestimonialsSection {...data.testimonials} />}
{data.favorites && <FavoritesSection {...data.favorites} />}
</main>
<Sidebar class="hidden lg:block" />
<Sidebar className="hidden lg:flex">
<SidebarItem icon="fa6-solid:user" />
{data.skills && <SidebarItem icon="fa6-solid:bars-progress" />}
{data.experience && <SidebarItem icon="fa6-solid:suitcase" />}
{data.portfolio && <SidebarItem icon="fa6-solid:rocket" />}
{data.testimonials && <SidebarItem icon="fa6-solid:comment" />}
{data.favorites && <SidebarItem icon="fa6-solid:star" />}
</Sidebar>
</div>
</body>
</html>