Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

navigation bar #1

Merged
chark1es merged 3 commits from chark1es into main 2024-12-04 15:46:09 +00:00
Conversation 0 Commits 3 Files changed 6 +75 -2
6 changed files with 75 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
public/logos/white_logo_horizontal.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

4
public/logos/white_logo_only.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 9.9 KiB

31
src/components/Navbar.astro Normal file
View file

@ -0,0 +1,31 @@
---
import { Image } from "astro:assets";
import pages from "../data/pages.json";
---
<div class="flex items-center">
<div class="flex flex-col border-white-500 border-2 bg-ieee_navigation_bg w-[98%] h-full mt-3 mx-auto rounded-[4rem] py-3">
<div class="flex justify-between items-center mx-6">
<div class="flex">
<Image src="/logos/white_logo_horizontal.svg" alt="IEEE UCSD Logo" width={300} height={300} />
</div>
<div class="flex gap-6">
{
pages.map((page) => (
<a
href={page.path}
class={`uppercase border-2 px-4 py-2 rounded-[3rem] transition-colors duration-200
${page.name === "Online Store"
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
: "text-white border-white hover:text-gray-300"}`}
>
{page.name}
</a>
))
}
</div>
</div>
</div>
</div>

30
src/data/pages.json Normal file
View file

@ -0,0 +1,30 @@
[
{
"name": "About",
"path": "/about"
},
{
"name": "Join",
"path": "/join"
},
{
"name": "Events",
"path": "/events"
},
{
"name": "Projects",
"path": "/projects"
},
{
"name": "Board",
"path": "/board"
},
{
"name": "Find Us",
"path": "/find-us"
},
{
"name": "Online Store",
"path": "/online-store"
}
]

2
src/layouts/Layout.astro
View file

@ -7,7 +7,7 @@
<meta name="generator" content={Astro.generator} />
<title>Astro Basics</title>
</head>
<body>
<body class="bg-ieee_blue">
<slot />
</body>
</html>

3
src/pages/index.astro
View file

@ -1,5 +1,6 @@
---
import Welcome from '../components/Welcome.astro';
import Navbar from '../components/Navbar.astro';
import Layout from '../layouts/Layout.astro';
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
@ -7,5 +8,5 @@ import Layout from '../layouts/Layout.astro';
---
<Layout>
<Welcome />
<Navbar />
</Layout>