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

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>
                <span className="desktop">SudoBot Docs</span>
            </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
9	export default function Navbar() {
10	return (
11	<nav className={styles.nav}>
12	<a className={styles.logoWrapper} href="/">
13	<Image src={logo.src} alt="Logo" height={128} width={128} />
14	<span className="mobile">SudoBot</span>
15	<span className="desktop">SudoBot Docs</span>
16	</a>
17
18	<ul className={`${styles.ul} desktop`}>
19	{pages.map(link => {
20	const LinkComponent = link.url.startsWith("/") ? Link : "a";
21	return (
22	<li key={`${link.url}_${link.name}`}>
23	<LinkComponent
24	href={link.url}
25	{...(/^http(s?):\/\//gi.test(link.url)
26	? { target: "_blank", rel: "noreferrer" }
27	: {})}
28	title={link.name}
29	>
30	{link.name}
31	</LinkComponent>
32	</li>
33	);
34	})}
35	</ul>
36
37	<Search />
38
39	<NavbarClientSide />
40	</nav>
41	);
42	}