Skip to content

Commit 5aa33b8

Browse files
chamchi0809chamchi0809
committed
feat: 사이드 네비게이션 컴포넌트 추가 및 스타일 개선
1 parent 59017b8 commit 5aa33b8

File tree

8 files changed

+2090
-16
lines changed

8 files changed

+2090
-16
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@astrojs/react": "^4.3.0",
13+
"@lucide/astro": "^0.542.0",
1314
"@react-three/drei": "^10.7.4",
1415
"@react-three/fiber": "^9.3.0",
1516
"@react-three/postprocessing": "^3.0.4",

‎pnpm-lock.yaml‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/images/github.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎public/images/grid-top-right.svg‎

Lines changed: 1993 additions & 0 deletions
Loading

‎src/components/SideNav.astro‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
import {type Icon as IconType, House, Cog} from "@lucide/astro";
3+
import SideNavItem from "./SideNavItem.astro";
4+
5+
const {pathname} = Astro.url;
6+
7+
type MenuItem = {
8+
name: string;
9+
pathname: string;
10+
icon: typeof IconType;
11+
};
12+
13+
const menuItems: MenuItem[] = [
14+
{
15+
name: 'Home',
16+
pathname: '/',
17+
icon: House,
18+
},
19+
{
20+
name: 'Works',
21+
pathname: '/works',
22+
icon: Cog,
23+
},
24+
];
25+
---
26+
27+
<div class="w-70 h-full flex flex-col bg-[#1e1e1e] border-r border-gray-800 p-8 gap-9 z-50">
28+
<div class="w-full flex flex-row items-center">
29+
<div class="rounded-full w-12 h-12 bg-[url(/images/anvy_profile.png)] bg-center bg-cover"/>
30+
<div class="ml-4">
31+
<h1 class="text-bright text-lg font-bold">Chamchi</h1>
32+
<p class="text-bright text-sm">Frontend Developer</p>
33+
</div>
34+
</div>
35+
{menuItems.map(item =>
36+
<SideNavItem icon={item.icon} label={item.name} pathname={item.pathname}>
37+
<item.icon/>
38+
</SideNavItem>)}
39+
</div>

‎src/components/SideNavItem.astro‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
import {type Icon as IconType, House, Cog} from "@lucide/astro";
3+
interface Props {
4+
pathname: string;
5+
label: string;
6+
icon: IconType; // You can specify a more precise type if needed
7+
}
8+
9+
const {pathname, label, icon} = Astro.props;
10+
---
11+
12+
<a href={pathname} class=`p-3 flex flex-row items-center gap-3 cursor-pointer rounded-full text-bright select-none transition-all
13+
hover:bg-bright hover:text-gray-950
14+
active:scale-105
15+
${pathname === Astro.url.pathname && 'bg-bright text-gray-950'}`>
16+
<slot/>
17+
<span>{label}</span>
18+
</a>

‎src/layouts/Layout.astro‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
---
2-
import GlobalStyles from "../components/GlobalStyles.astro";
2+
import "../assets/app.css";
3+
import SideNav from "../components/SideNav.astro";
4+
import {ClientRouter, slide} from "astro:transitions";
35
---
46
<!doctype html>
57
<html lang="en">
@@ -9,18 +11,36 @@ import GlobalStyles from "../components/GlobalStyles.astro";
911
<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
1012
<meta name="generator" content={Astro.generator}/>
1113
<title>Astro Basics</title>
14+
<ClientRouter/>
1215
</head>
1316
<body>
14-
<GlobalStyles/>
15-
<slot/>
17+
<SideNav/>
18+
<main transition:animate={slide({duration: '0.4s'})}>
19+
<slot/>
20+
</main>
1621
</body>
1722
</html>
1823

1924
<style>
20-
html,
25+
html {
26+
width: 100%;
27+
height: 100%;
28+
}
29+
2130
body {
22-
margin: 0;
31+
display: flex;
32+
flex-direction: row;
2333
width: 100%;
2434
height: 100%;
35+
background-color: #222222;
36+
opacity: 1;
37+
background-image: linear-gradient(rgba(28, 28, 28, 0.64), rgba(28, 28, 28, 0.64)), url('/images/grid-top-right.svg'), linear-gradient(rgba(28, 28, 28, 0.24), rgba(28, 28, 28, 0.24));
38+
background-position: center;
39+
background-size: cover;
40+
}
41+
42+
main {
43+
flex: 1;
44+
height: 100%;
2545
}
2646
</style>

‎src/pages/index.astro‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Layout from '../layouts/Layout.astro';
77
---
88

99
<Layout>
10-
<div class="wrapper">
10+
<div class="w-full h-full relative">
1111
<MonitorBG client:only="react">
1212
<Fragment slot="fallback">
1313
</Fragment>
@@ -16,13 +16,4 @@ import Layout from '../layouts/Layout.astro';
1616
</Layout>
1717

1818
<style>
19-
.wrapper {
20-
width: 100%;
21-
height: 100%;
22-
background-color: #222222;
23-
opacity: 1;
24-
background-image: radial-gradient(#333333 2px, transparent 2px), radial-gradient(#333333 2px, #222222 2px);
25-
background-size: 80px 80px;
26-
background-position: 0 0, 40px 40px;
27-
}
2819
</style>

0 commit comments

Comments
 (0)