Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

Added Navbar and Themeselector components

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/footer.tsx
View file

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

16
components/layout.tsx
View file

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

23
components/navbar.tsx
View file

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