Added Navbar and Themeselector components

This commit is contained in:
Neshura 2022-12-15 21:23:34 +01:00
parent 3781b4ae10
commit c51136b934
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
3 changed files with 25 additions and 24 deletions

View file

@ -1,11 +1,11 @@
import styles from '/styles/Home.module.css'
import { Footer } from "../components/styles/generic"
const Footer = () => {
const PageFooter = () => {
return (
<footer className={styles.footer}>
<Footer>
Built using Next.js
</footer>
</Footer>
);
}
export default Footer;
export default PageFooter;

View file

@ -1,8 +1,7 @@
import Footer from './footer'
import Navbar from './navbar'
import styles from '/styles/Home.module.css'
import PageFooter from './footer'
import PageNavbar from './navbar'
import Script from 'next/script'
import { Page } from './styles/generic'
import { Page, Main } from './styles/generic'
import StyleSelector from './themeselector'
@ -28,12 +27,11 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
`}
</Script>
<Navbar />
<StyleSelector></StyleSelector>
<main className={styles.main}>
<PageNavbar />
<Main>
{children}
</main>
<Footer />
</Main>
<PageFooter />
</Page>
);
}

View file

@ -1,6 +1,6 @@
import styles from '/styles/Home.module.css'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { NavBar, NavLink } from './styles/navbar'
import StyleSelector from './themeselector';
const navLinks = [
{ name: "Home", href: "/" },
@ -9,19 +9,22 @@ const navLinks = [
{ name: "Services", href: "/services" }
]
const Navbar = () => {
const PageNavbar = () => {
const path = usePathname();
return (
<nav className={styles.navbar}>
{navLinks.map((item, index) => (
<Link className={path == item.href ? styles.navelem_active : styles.navelem} key={item.name} href={item.href}>
<NavBar>
{navLinks.map((item) => (
<NavLink active={path == item.href ? true : false} key={item.name} href={item.href}>
{item.name}
</Link>
</NavLink>
))}
<Link className={styles.navelem} key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">Mastodon</Link>
</nav>
<NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
Mastodon
</NavLink>
<StyleSelector></StyleSelector>
</NavBar>
);
}
export default Navbar;
export default PageNavbar;