Skip to content

Commit

Permalink
Merge pull request #54 from PNU-AID/dev
Browse files Browse the repository at this point in the history 
Dev: 메인페이지와 헤더 디자인 수정
  • Loading branch information
@KimCookieYa
KimCookieYa authored Feb 25, 2024
2 parents 55570fa + ac9750c commit b4c31d7
Show file tree
Hide file tree
Showing 7 changed files with 218 additions and 203 deletions.
280 changes: 139 additions & 141 deletions src/components/common/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,169 +65,167 @@ function Header() {
isVisible ? '' : '-translate-y-full',
].join(' ')}
>
<div className="flex items-center justify-around w-full ">
<div className="flex items-center justify-between w-full sm:justify-around ">
<div className="flex items-center">
<div className="flex items-center">
<Link className="relative m-2" to="/">
<img
alt="aid-logo"
className="absolute top-0 bottom-0 m-auto"
src={AidLogoImg}
width={20}
/>
<h3
className={[
'flex justify-start ml-8 text-2xl font-bold',
'transition-all duration-300',
!isDarkPage(location.pathname)
? 'text-black'
: lastScrollY > 0 || isExpanded
? textCss
: 'text-black',
].join(' ')}
id="aid-logo"
>
AI Developer
</h3>
</Link>
</div>
<MenuIconSvg
className="sm:hidden"
onClick={() => setIsExpanded(!isExpanded)}
width={70}
/>
<nav
className={[
'flex flex-col absolute top-[60px] gap-0 sm:mb-4 w-full shadow-xl font-sans text-center rounded-xl pb-2',
'sm:justify-end sm:w-fit sm:gap-0 sm:pt-2 sm:flex-row sm:shadow-none sm:static sm:mx-8 sm:my-2 sm:text-left sm:pb-0 sm:rounded-none',
'transition-all duration-500',
isExpanded
? 'max-h-[500px] bg-white'
: 'max-h-0 bg-transparent sm:max-h-[300px]',
].join(' ')}
>
<a href={import.meta.env.VITE_AID_NOTION_NEWS_URL} target="_blank">
<Button
className={[
!isDarkPage(location.pathname)
? 'text-black'
: lastScrollY > 0 || isExpanded
? textCss
: 'text-black',
].join(' ')}
label="About Us"
size="large"
/>
</a>
{headerData.map((item) => {
if (item.label === 'Login') {
if (authState.isAuthenticated) {
return (
<div className="relative">
<button
className="px-4 py-3 rounded-lg hover:bg-gray-100"
onClick={toggleProfile}
>
<span className="text-primary">
{authState.authInfo!.nickname}
</span>
님, 안녕하세요!
</button>
<HeaderProfile
isExpanded={isVisible && isProfileExpanded}
/>
</div>
);
} else {
<Link to="/login">
<Button
className={[
location.pathname.slice(1) === 'login'
? 'font-bold'
: '',
!isDarkPage(location.pathname)
? 'text-black'
: lastScrollY > 0 || isExpanded
? textCss
: 'text-black',
].join(' ')}
label="Login"
size="large"
<Link className="relative m-2" to="/">
<img
alt="aid-logo"
className="absolute top-0 bottom-0 m-auto"
src={AidLogoImg}
width={20}
/>
<h3
className={[
'flex justify-start ml-8 text-2xl font-bold',
'transition-all duration-300',
!isDarkPage(location.pathname)
? 'text-black'
: lastScrollY > 0 || isExpanded
? textCss
: 'text-black',
].join(' ')}
id="aid-logo"
>
AI Developer
</h3>
</Link>
</div>

<nav
className={[
'flex flex-col absolute top-[60px] gap-0 sm:mb-4 w-full shadow-xl font-sans text-center rounded-xl pb-2',
'sm:justify-end sm:w-fit sm:gap-0 sm:pt-2 sm:flex-row sm:shadow-none sm:static sm:mx-8 sm:my-2 sm:text-left sm:pb-0 sm:rounded-none',
'transition-all duration-500',
isExpanded
? 'max-h-[500px] bg-white'
: 'max-h-0 bg-transparent sm:max-h-[300px]',
isDropdownExpanded ? '' : 'overflow-hidden',
].join(' ')}
>
<a href={import.meta.env.VITE_AID_NOTION_NEWS_URL} target="_blank">
<Button
className={[
!isDarkPage(location.pathname)
? 'text-black'
: lastScrollY > 0 || isExpanded
? textCss
: 'text-black',
].join(' ')}
label="About Us"
size="large"
/>
</a>
{headerData.map((item) => {
if (item.label === 'Login') {
if (authState.isAuthenticated) {
return (
<div className="relative">
<button
className="px-4 py-3 rounded-lg hover:bg-gray-100"
onClick={toggleProfile}
>
<span className="text-primary">
{authState.authInfo!.nickname}
</span>
님, 안녕하세요!
</button>
<HeaderProfile
isExpanded={isVisible && isProfileExpanded}
/>
</Link>;
}
}
return (
<Link key={item.label} to={item.path}>
</div>
);
} else {
<Link to="/login">
<Button
className={[
location.pathname.slice(1) === item.path
? 'font-bold'
: '',
location.pathname.slice(1) === 'login' ? 'font-bold' : '',
!isDarkPage(location.pathname)
? 'text-black'
: lastScrollY > 0 || isExpanded
? textCss
: 'text-black',
].join(' ')}
label={item.label}
label="Login"
size="large"
/>
</Link>
);
})}
<div className="relative flex flex-col items-center justify-center">
<div
className="flex px-6 py-3 cursor-pointer"
onClick={() => setIsDropdownExpanded((prev) => !prev)}
>
<button
className={[
!isDarkPage(location.pathname)
? 'text-black'
: lastScrollY > 0 || isExpanded
? textCss
: 'text-black',
].join(' ')}
>
Contack Us
</button>
<IoIosArrowDown
</Link>;
}
}
return (
<Link key={item.label} to={item.path}>
<Button
className={[
location.pathname.slice(1) === item.path ? 'font-bold' : '',
!isDarkPage(location.pathname)
? 'text-black'
: lastScrollY > 0 || isExpanded
? textCss
: 'text-black',
].join(' ')}
label={item.label}
size="large"
/>
</div>
{
<div
className={[
'absolute w-fit top-[60px] bg-white rounded-lg overflow-hidden duration-500 ease',
isDropdownExpanded ? 'max-h-screen shadow-xl' : 'max-h-0',
].join(' ')}
>
{aidUrls.map((item) => {
return (
<a
className="flex items-center px-4 py-2 text-sm text-black cursor-pointer gap-x-1"
href={item.url}
key={item.label}
target="_blank"
>
<item.image />
<span>{item.label}</span>
</a>
);
})}
</div>
}
</Link>
);
})}
<div className="relative flex flex-col items-center justify-center">
<div
className="flex items-center px-6 py-3 cursor-pointer gap-x-1"
onClick={() => setIsDropdownExpanded((prev) => !prev)}
>
<button
className={[
!isDarkPage(location.pathname)
? 'text-black'
: lastScrollY > 0 || isExpanded
? textCss
: 'text-black',
].join(' ')}
>
Contack Us
</button>
<IoIosArrowDown
className={[
!isDarkPage(location.pathname)
? 'text-black'
: lastScrollY > 0 || isExpanded
? textCss
: 'text-black',
].join(' ')}
/>
</div>
</nav>
{
<div
className={[
'absolute w-fit top-[60px] bg-white rounded-lg overflow-hidden transition-all duration-500',
isDropdownExpanded ? 'max-h-[500px]' : 'max-h-0',
].join(' ')}
>
{aidUrls.map((item) => {
return (
<a
className="flex items-center px-4 py-2 text-sm text-black cursor-pointer gap-x-1"
href={item.url}
key={item.label}
target="_blank"
>
<item.image />
<span>{item.label}</span>
</a>
);
})}
</div>
}
</div>
</nav>
<div className="flex">
<LanguageToggle />
<MenuIconSvg
className="sm:hidden"
onClick={() => setIsExpanded((prev) => !prev)}
width={70}
/>
</div>
<LanguageToggle />
</div>
</header>
);
Expand Down
Loading

0 comments on commit b4c31d7

Please sign in to comment.