Added Navbar and Themeselector components

components/footer.tsx

@@ -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;

components/layout.tsx

@@ -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>
   );
 }

components/navbar.tsx

@@ -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;