Skip to content

Commit

Permalink
[Update]TopNav 상단바 css변경
Browse files Browse the repository at this point in the history
ChungO5 committed Jun 21, 2024
1 parent c92afbe commit c112e92
Showing 2 changed files with 55 additions and 57 deletions.
2 changes: 2 additions & 0 deletions src/components/atoms/ProfileImg.js
Original file line number Diff line number Diff line change
@@ -2,6 +2,8 @@ import React from "react";
import styled from "styled-components";

const ProfileImgStyle = styled.div`
width: 64px;
height: 64px;
.roundimg {
background-color: #fff;
border-radius: 50%;
110 changes: 53 additions & 57 deletions src/components/organisms/TopNavigationBar.js
Original file line number Diff line number Diff line change
@@ -27,24 +27,21 @@ const customStyles = {
};

const TopBar = styled.div`
@media (max-width: 950px) {
width: 900px;
}
background-color: #5383e8;
height: 80px;
.nav {
height: 80px;
width: 1280px;
display: flex;
align-items: center;
margin: auto;
}
display: flex;
align-items: center;
padding: 0 30px 0 30px;
.space {
flex: 1;
}
.nav-link-activev {
color: #fff;
}
.nav-link {
/* color: #fff; */
}
a {
color: #b3cdff;
text-decoration: none;
@@ -64,9 +61,7 @@ const TopBar = styled.div`
color: white;
text-decoration: none;
width: 100px;
height: auto;
display: block;
text-align: center;
margin-left: 10px;
border: 0px;
font-size: 18px;
@@ -105,51 +100,52 @@ const TopNavigationBar = () => {

return (
<TopBar className="top-nav-bar">
<div className="nav">
<Link to="/">
<Logo />
</Link>
<NavLink
to="/"
className={({ isActive }) =>
isActive ? "nav-link-active" : "nav-link"
}
>
</NavLink>
<Link
to="/ranking"
className={({ isActive }) =>
isActive ? "nav-link-active" : "nav-link"
}
>
랭킹
</Link>
<div className="space" />
{userId === null ? (
<div className="leftMenu">
<Link to="/login" className="button">
로그인
</Link>
</div>
) : (
<div className="leftMenu">
<button className="button">
<i
class="fa-solid fa-users fa-sm"
style={{ cursor: "pointer" }}
onClick={openModal}
/>
</button>
<Link to={`/mypage`}>
<ProfileImg />
</Link>
<button className="button" onClick={LogOut}>
로그아웃
</button>
</div>
)}
</div>
<Link to="/">
<Logo />
</Link>
<NavLink
to="/"
className={({ isActive }) =>
isActive ? "nav-link-active" : "nav-link"
}
>
</NavLink>
<Link
to="/ranking"
className={({ isActive }) =>
isActive ? "nav-link-active" : "nav-link"
}
>
랭킹
</Link>
<div className="space" />
{userId === null ? (
<div className="leftMenu">
<Link to="/login" className="button">
로그인
</Link>
</div>
) : (
<div className="leftMenu">
<button className="button">
<i
class="fa-solid fa-users fa-sm"
style={{
cursor: "pointer",
justifyContent: "center",
}}
onClick={openModal}
/>
</button>
<Link to={`/mypage`}>
<ProfileImg />
</Link>
<button className="button" onClick={LogOut}>
로그아웃
</button>
</div>
)}
<Modal
isOpen={isModalOpen}
onRequestClose={closeModal}

0 comments on commit c112e92

Please sign in to comment.