import React from 'react';
import { Link } from 'gatsby';
import logoSORIT from '../resources/logoSORIT.svg';


const TopNavBar = () => {
    return (
        <div className="topNavBar">
            <ul className="topBar">
                <li>
                    <Link to="/"><img src={logoSORIT} className="SpinLogo" alt="Logo Oborové rady IT" width="60"/></Link>
                </li>
                <li>
                    <ul className="shapeShiftBar">
                        <li className="dropdown">
                            <h3>Akce</h3>
                            <ul className="dropdownContent">
                                <li><Link to="/o-seznamovaku/"><h3>Seznamováky</h3></Link></li>
                                <li><Link to="/vecirky/"><h3>Večírky</h3></Link></li>
                            </ul>
                        </li>
                        <li>
                            <Link to="/materialy/"><h3>Studijní materiály</h3></Link>
                        </li>
                        <li>
                            <Link to="/doucovani/"><h3>Doučování</h3></Link>
                        </li>
                        <li>
                            <Link to="/o-nas/"><h3>O Radě</h3></Link>
                        </li>

                    </ul>
                </li>
                <li>
                    <ul className="mobileBar">
                        <li className="dropdown">
                                <svg viewBox="0 0 100 80" width="40" height="40">
                                <rect width="100" height="20" fill="#4b423c"></rect>
                                <rect y="30" width="100" height="20" fill="#4b423c"></rect>
                                <rect y="60" width="100" height="20" fill="#4b423c"></rect>
                                </svg>
                            <ul className="dropdownContent">
                                <li><Link to="/o-seznamovaku"><h3>Seznamováky</h3></Link></li>
                                <li><Link to="/vecirky"><h3>Večírky</h3></Link></li>
                                <li><Link to="/materialy"><h3>Studijní materiály</h3></Link></li>
                                <li><Link to="/doucovani"><h3>Doučování</h3></Link></li>
                                <li><Link to="/o-nas"><h3>O Radě</h3></Link></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    );
}
 
export default TopNavBar;