components/Navbar/Navbar.tsx

import Link from "@/components/Navigation/Link";
import styles from "@/styles/Navbar.module.css";
import { pages } from "@/utils/pages";
import Image from "next/image";
import logo from "../../images/sudobot.png";
import Search from "../Searching/Search";
import NavbarClientSide from "./NavbarClientSide";
import { NavbarTitle } from "./NavbarTitle";

export default function Navbar() {
    return (
        <nav className={styles.nav}>
            <a className={styles.logoWrapper} href="/">
                <Image src={logo.src} alt="Logo" height={128} width={128} />
                <span className="mobile">SudoBot</span>
                <NavbarTitle />
            </a>

            <ul className={`${styles.ul} desktop`}>
                {pages.map(link => {
                    const LinkComponent = link.url.startsWith("/") ? Link : "a";
                    return (
                        <li key={`${link.url}_${link.name}`}>
                            <LinkComponent
                                href={link.url}
                                {...(/^http(s?):\/\//gi.test(link.url)
                                    ? { target: "_blank", rel: "noreferrer" }
                                    : {})}
                                title={link.name}
                            >
                                {link.name}
                            </LinkComponent>
                        </li>
                    );
                })}
            </ul>

            <Search />

            <NavbarClientSide />
        </nav>
    );
}
1	import Link from "@/components/Navigation/Link";
2	import styles from "@/styles/Navbar.module.css";
3	import { pages } from "@/utils/pages";
4	import Image from "next/image";
5	import logo from "../../images/sudobot.png";
6	import Search from "../Searching/Search";
7	import NavbarClientSide from "./NavbarClientSide";
8	import { NavbarTitle } from "./NavbarTitle";
9
10	export default function Navbar() {
11	return (
12	<nav className={styles.nav}>
13	<a className={styles.logoWrapper} href="/">
14	<Image src={logo.src} alt="Logo" height={128} width={128} />
15	<span className="mobile">SudoBot</span>
16	<NavbarTitle />
17	</a>
18
19	<ul className={`${styles.ul} desktop`}>
20	{pages.map(link => {
21	const LinkComponent = link.url.startsWith("/") ? Link : "a";
22	return (
23	<li key={`${link.url}_${link.name}`}>
24	<LinkComponent
25	href={link.url}
26	{...(/^http(s?):\/\//gi.test(link.url)
27	? { target: "_blank", rel: "noreferrer" }
28	: {})}
29	title={link.name}
30	>
31	{link.name}
32	</LinkComponent>
33	</li>
34	);
35	})}
36	</ul>
37
38	<Search />
39
40	<NavbarClientSide />
41	</nav>
42	);
43	}