Ekşi Duyuru

Selamlar, bir YouTuber buldum. Çok güzel tasarımları var. Adamın ne yaptığını anlamaya çalışıyorum, kodlarını okumaya uğraşıyorum ama tıkanıyorum bazen. Aşağıdaki kodlarda bir navbar yapıyor. Birkaç yeri anlayamıyorum bir türlü.

1) Buradaki <header className={styles.navbar}> kodunda, header className'inde kullanılan styles nereden geliyor?

2) <ul className={nav ? [styles.menu, styles.active].join(' ') : [styles.menu]} >

Yukarıdaki, ternary operatöründen gelen styles yine nereden geldi? .'dan sonraki kısımlar, muhtemelen css tagleri. Ve neden ' ' stringiyle birleştirme ihtiyacı hissediyoruz oradaki kodu?

Yardımcı olursanız çok sevinirim. Bakıyorum, bakıyorum ama bir türlü anlamadım.

import { React, useState } from 'react';
import styles from './Navbar.module.css';
import Logo from '../../images/logo.png';
import {
AiOutlineUser,
AiOutlineSearch,
AiOutlineMenu,
AiOutlineClose,
} from 'react-icons/ai';

const Navbar = () => {
const [nav, setNav] = useState(false);

return (
<header className={styles.navbar}>
<img src={Logo} alt='Logo' />
<nav>
<ul className={nav ? [styles.menu, styles.active].join(' ') : [styles.menu]} >
<li>
<a href='/#'>Learn More</a>
</li>
<li>
<a href='/#'>Log in</a>
</li>
<li>
<a href='/#'>Sign up</a>
</li>
<li>
<AiOutlineSearch size={25} style={{ marginTop: '6px' }} />
</li>
<li>
<AiOutlineUser size={25} style={{ marginTop: '6px' }} />
</li>
</ul>
</nav>
<div onClick={()=> setNav(!nav)} className={styles.mobile_btn}>
{nav ? <AiOutlineClose size={30} /> : <AiOutlineMenu size={30} />}

</div>
</header>
);
};

export default Navbar;