import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";
import AccountDetailsModal from "./AccountDetailsModal";

const getById = (args) => document.getElementById(args);

export default class Navbar extends React.Component {
    openModal = (e) =>{
        e.preventDefault();
        console.log('oi')
        getById('account-modal').style.display = "block"
    }
    closeModal = (e) =>{
        e.preventDefault();
        getById('account-modal').style.display = ""
    }
  render() {
    return (
        <Router>
            <nav className="sitenav">
                <div className="sitenav__nav">
                    <div className="sitenav__nav-logo">

                    </div>
                    <div className="site-navigation">
                        <div className="sitenav-menu-left">
                            <ul className="sitenav-menu">
                                <li className="sitenav-menu__item">
                                    <Link to="/discover" className="sitenav-menu__link" href="#">
                                        <span className="sitenav-menu__text">Discover</span>
                                    </Link>
                                </li>
                                <li className="sitenav-menu__item">
                                    <Link to="following" className="sitenav-menu__link" href="#">
                                        <span className="navbar-menu__text">Following</span>
                                    </Link>
                                </li>
                                <li className="sitenav-menu__item">
                                    <Link to="subscriptions" className="sitenav-menu__link" href="#">
                                        <span className="navbar-menu__text">Subscriptions</span>
                                    </Link>
                                </li>
                            </ul>
                        </div>
                        <div className="sitenav-menu-search">
                            <form className="sitenav-menu-search__form">
                                <input placeholder="Search" type="text" name="name" />
                            </form>
                        </div>
                        <div className="sitenav-menu-right">
                            <ul className="sitenav-menu">
                                <div className="sitenav-menu__icons">
                                    <li className="sitenav-menu__icons-item upload-button">
                                        <Link to="/upload" className="sitenav-menu__icons-link" href="">
                                            <i class="ri-upload-2-line"></i>
                                            <span>Upload</span>
                                        </Link>
                                    </li>
                                    <li className="sitenav-menu__icons-item">
                                        <a className="sitenav-menu__icons-link" href="">
                                            <i className="ri-vip-crown-line"></i>
                                        </a>
                                    </li>
                                    <li className="sitenav-menu__icons-item">
                                        <a className="sitenav-menu__icons-link" href="">
                                            <i className="ri-notification-2-line"></i>
                                        </a>
                                    </li>
                                </div>
                                <div className="sitenav-menu-account">
                                    <a onClick={this.openNav} className="sitenav-menu-account__link">
                                        <div className="sitenav-menu-account__avatar">
                                            <img src="./img/pf-img.png"></img>
                                        </div>
                                    </a>
                                    <AccountDetailsModal/>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
      </Router>
    );
  }
}

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";

export default class AccountDetailsModal extends React.Component {
    render() {
        return (
        <div id="account-modal" className="account-modal" style={{display: 'none'}}>

        </div>
        );
    }
}

  .account-modal {
    background-color: $dark-grey;
    width: 100px;
    height: 100px;
    position: absolute;
}