Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 119 Packages Wiki Activity Actions

Fixed Iconoir Icons #19

Merged
Firq merged 2 commits from dev into main 2023-12-29 22:11:08 +00:00
Conversation 0 Commits 2 Files changed 5 +68 -24
5 changed files with 68 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "@firq/fgosite", "name": "@firq/fgosite",
"type": "module", "type": "module",
"version": "0.1.16", "version": "0.1.17",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",

27
src/components/navbar.astro
View file

@ -1,6 +1,8 @@
--- ---
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import logo from '../assets/logo.svg' import logo from '../assets/logo.svg'
import hamburger from 'iconoir/icons/menu.svg'
const hamburger_src_url = `url("${hamburger.src}")`;
--- ---
<header> <header>
@ -15,11 +17,11 @@ import logo from '../assets/logo.svg'
<slot /> <slot />
</ul> </ul>
<div class="placeholder"></div> <div class="placeholder"></div>
<i class="iconoir-menu"></i> <div class="icon"></div>
</button> </button>
</header> </header>
<style> <style define:vars={{ hamburger_src_url }}>
header { header {
z-index: 1000; z-index: 1000;
position: sticky; position: sticky;
@ -81,16 +83,6 @@ import logo from '../assets/logo.svg'
height: 64px; height: 64px;
} }
.mobile > i {
position: static;
color: white;
font-weight: bold;
font-size: 2em;
align-self: flex-start;
padding-right: 1em;
padding-top: 1.15rem;
}
.mobile > ul { .mobile > ul {
display: none; display: none;
padding: 0px; padding: 0px;
@ -113,6 +105,17 @@ import logo from '../assets/logo.svg'
justify-self: top; justify-self: top;
} }
.icon {
mask: var(--hamburger_src_url) no-repeat center;
background-color: white;
width: 2em;
height: 2em;
position: static;
align-self: flex-start;
padding-right: 1em;
padding-top: 2.5em;
}
@media (min-width: 1140px) { @media (min-width: 1140px) {
.mobile { .mobile {
display: none; display: none;

25
src/components/navbarEntry.astro
View file

@ -3,7 +3,7 @@ export interface Props {
currentPage?: string currentPage?: string
link: string link: string
text: string text: string
icon: string icon: ImageMetadata
} }
const { icon, text, link, currentPage } = Astro.props const { icon, text, link, currentPage } = Astro.props
@ -17,6 +17,7 @@ if (currentPage === slug) {
currPage = 'current' currPage = 'current'
} }
const icon_src_url = `url("${icon.src}")`;
const fulllink = `/${slug}` const fulllink = `/${slug}`
--- ---
@ -28,12 +29,12 @@ const fulllink = `/${slug}`
class={currPage} class={currPage}
tabindex="0" tabindex="0"
> >
<i class={icon}></i> <div class="icon"></div>
{text} {text}
</a> </a>
</li> </li>
<style> <style define:vars={{ icon_src_url }}>
li { li {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -41,6 +42,7 @@ const fulllink = `/${slug}`
display: flex; display: flex;
width: 200px; width: 200px;
} }
li > a { li > a {
display: inline-flex; display: inline-flex;
color: white; color: white;
@ -52,10 +54,27 @@ const fulllink = `/${slug}`
font-weight: bold; font-weight: bold;
gap: 0.2em; gap: 0.2em;
} }
li > a:hover { li > a:hover {
color: var(--c-purplepink); color: var(--c-purplepink);
} }
li > a:hover > .icon {
background-color: var(--c-purplepink);
}
.current { .current {
color: var(--c-darkpurple) !important; color: var(--c-darkpurple) !important;
} }
.current > .icon {
background-color: var(--c-darkpurple) !important;
}
.icon {
mask: var(--icon_src_url) no-repeat center;
background-color: white;
width: 1.4em;
height: 1.4em;
}
</style> </style>

28
src/layouts/Layout.astro
View file

@ -3,7 +3,12 @@ import Navbar from '../components/navbar.astro'
import NavbarEntry from '../components/navbarEntry.astro' import NavbarEntry from '../components/navbarEntry.astro'
import navdata from '../../static/data/_navdata.json' import navdata from '../../static/data/_navdata.json'
import embed from '../assets/embed.png' import embed from '../assets/embed.png'
import "iconoir/css/iconoir.css"
import home from 'iconoir/icons/home.svg'
import servants from 'iconoir/icons/task-list.svg'
import ta_collection from 'iconoir/icons/database.svg'
import blog from 'iconoir/icons/bookmark-book.svg'
import about from 'iconoir/icons/mail.svg'
export interface Props { export interface Props {
title: string title: string
@ -11,6 +16,18 @@ export interface Props {
descriptionOverride?: string descriptionOverride?: string
} }
interface IconsLookup {
[key: string]: ImageMetadata
}
const icons: IconsLookup = {
home: home,
servants: servants,
ta_collection: ta_collection,
blog: blog,
about: about,
}
const { descriptionOverride, currentpage, title } = Astro.props const { descriptionOverride, currentpage, title } = Astro.props
let description let description
@ -24,9 +41,14 @@ let currPage = 'https://firq.dev/'
if (currentpage !== 'home') { if (currentpage !== 'home') {
currPage += currentpage currPage += currentpage
} }
const mapped_navdata = navdata.map((item) => ({
...item,
...{ icon: icons[item.icon] },
}))
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>{title}</title> <title>{title}</title>
@ -54,7 +76,7 @@ if (currentpage !== 'home') {
<body> <body>
<Navbar> <Navbar>
{ {
navdata.map((item) => ( mapped_navdata.map((item) => (
<NavbarEntry currentPage={currentpage} {...item} /> <NavbarEntry currentPage={currentpage} {...item} />
)) ))
} }

10
static/data/_navdata.json
View file

@ -2,26 +2,26 @@
{ {
"link": "/", "link": "/",
"text": "Home", "text": "Home",
"icon": "iconoir-home" "icon": "home"
}, },
{ {
"link": "/servants", "link": "/servants",
"text": "Servants", "text": "Servants",
"icon": "iconoir-task-list" "icon": "servants"
}, },
{ {
"link": "/ta-collection", "link": "/ta-collection",
"text": "TA Collection", "text": "TA Collection",
"icon": "iconoir-database" "icon": "ta_collection"
}, },
{ {
"link": "/blog", "link": "/blog",
"text": "Blog", "text": "Blog",
"icon": "iconoir-bookmark-book" "icon": "blog"
}, },
{ {
"link": "/about", "link": "/about",
"text": "About", "text": "About",
"icon": "iconoir-mail" "icon": "about"
} }
] ]