Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New homepage and header styling #7

Merged
merged 3 commits into from
Apr 15, 2024
Merged

New homepage and header styling #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d74c6f
Remove open source announcement and relevant codes about newspaper
chimpdev Apr 15, 2024
27fa832
New homepage
chimpdev Apr 15, 2024
17cb10c
New header
chimpdev Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions client/app/components/Header/CollapsedHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,9 @@ import { AnimatePresence, motion } from 'framer-motion';
import LogoWithText from '@/app/components/Logo/WithText';
import { nanoid } from 'nanoid';
import { usePathname } from 'next/navigation';
import { useNewspaperStore } from '@/stores/newspaper';

export default function CollapsedHeader() {
const theme = useThemeStore(state => state.theme);
const newspaperIsOpen = useNewspaperStore(state => state.isOpen);

const [open, setOpen] = useState(false);
const pathname = usePathname();
Expand All @@ -28,10 +26,7 @@ export default function CollapsedHeader() {
}, [open]);

return (
<header className={cn(
'fixed top-0 flex justify-between w-full px-4 mobile:px-16 lg:px-28 2xl:px-48 z-[9999] pb-6 [transition-duration:750ms]',
newspaperIsOpen && 'opacity-0'
)}>
<header className='fixed top-0 flex justify-between w-full px-4 mobile:px-16 lg:px-28 2xl:px-48 z-[9999] pb-6 [transition-duration:750ms]'>
<div className='mt-6'>
<Link href='/'>
<Image src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'} width={64} height={64} className='w-[48px] h-[48px]' alt='discord.place Logo' />
Expand Down Expand Up @@ -80,7 +75,7 @@ export default function CollapsedHeader() {
)}
onClick={() => setOpen(false)}
>
{link.label}
{link.title}
{pathname === link.href && <span className='px-2 py-1 ml-auto text-xs font-medium border rounded-full border-primary text-secondary bg-tertiary'>Current</span>}
</Link>
))}
Expand Down
96 changes: 48 additions & 48 deletions client/app/components/Header/NotCollapsedHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@ import Image from 'next/image';
import Link from 'next/link';
import cn from '@/lib/cn';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import config from '@/config';
import { usePrevious, useWindowScroll, useWindowSize } from 'react-use';
import { usePrevious, useWindowScroll } from 'react-use';
import useThemeStore from '@/stores/theme';
import UserSide from '@/app/components/Header/UserSide';
import { useNewspaperStore } from '@/stores/newspaper';

export default function NotCollapsedHeader() {
const theme = useThemeStore(state => state.theme);
const newspaperIsOpen = useNewspaperStore(state => state.isOpen);

const { y } = useWindowScroll();
const oldY = usePrevious(y);
Expand All @@ -29,60 +27,62 @@ export default function NotCollapsedHeader() {
}
}, [y, oldY]);

const { width } = useWindowSize();
const pathname = usePathname();

const [activeLinkWidth, setActiveLinkWidth] = useState(null);
const [activeLinkLeft, setActiveLinkLeft] = useState(null);
const backgroundRef = useRef(null);

useEffect(() => {
const activeLink = document.querySelector(`a[data-href="${pathname}"]`);
const activeLink = document.querySelector('header a[data-active="true"]');
if (activeLink) {
const rect = activeLink.getBoundingClientRect();
setActiveLinkWidth(rect.width);
setActiveLinkLeft(rect.left);
const { left, width } = activeLink.getBoundingClientRect();
const { left: parentLeft } = activeLink.parentElement.getBoundingClientRect();
const x = left - parentLeft;
const w = width;

backgroundRef.current.style.left = `${x}px`;
backgroundRef.current.style.width = `${w}px`;
backgroundRef.current.style.opacity = 1;
} else {
setActiveLinkWidth(null);
setActiveLinkLeft(null);
backgroundRef.current.style.opacity = 0;
}
}, [pathname, width]);
}, [pathname]);

return (
<header className={cn(
'fixed top-0 flex justify-between w-full px-12 lg:px-24 2xl:px-48 z-[9999] pb-6 transition-all [transition-duration:750ms]',
scrollDirection === 'down' && '-translate-y-full opacity-0 [transition-timing-function:cubic-bezier(.8,-0.76,.38,1.37)]',
scrollDirection === 'up' && 'translate-y-0 opacity-100',
newspaperIsOpen && 'transition-none opacity-0'
)}>
<div className='flex mt-6 gap-x-10'>
<Link href='/' className='hover:animate-logo-spin'>
<Image src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'} width={64} height={64} className='w-[48px] h-[48px]' alt='discord.place Logo' />
</Link>
<div className='flex items-center justify-center w-full h-full'>
<header className={cn(
'fixed top-0 grid mt-6 grid-cols-6 w-full max-w-[1200px] z-[9999] pb-6 transition-all [transition-duration:750ms]',
scrollDirection === 'down' && '-translate-y-full [transition-timing-function:cubic-bezier(.8,-0.76,.38,1.37)]',
scrollDirection === 'up' && 'translate-y-0 opacity-100'
)}>
<div className='flex gap-x-10'>
<Link href='/' className='hover:animate-logo-spin'>
<Image src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'} width={64} height={64} className='w-[48px] h-[48px]' alt='discord.place Logo' />
</Link>
</div>

<div className='flex items-center gap-x-2'>
<div
className={cn(
'h-[2px] absolute top-0 left-0 w-0 bg-black dark:bg-white transition-[width,left,opacity,top] duration-500 ease-in-out',
activeLinkWidth === null ? 'opacity-0 -top-[50px]' : 'opacity-100'
)}
style={{
width: activeLinkWidth,
left: activeLinkLeft
}}
/>
<div className='flex items-center justify-center col-span-4'>
<div className='relative flex items-center py-2 border rounded-2xl gap-x-2 border-[rgba(var(--bg-quaternary))] bg-secondary/50 backdrop-blur-lg'>
<div className='absolute left-0 h-full rounded-2xl w-0 bg-white z-[5]' ref={backgroundRef} />

{config.headerLinks.map(link => (
<Link key={link.href} href={link.href || ''} className={cn(
'mx-4 my-2 rounded relative flex items-center gap-x-2',
link.href === pathname ? 'font-medium pointer-events-none' : 'text-secondary hover:text-primary',
!link.href && 'cursor-not-allowed text-secondary/40 hover:text-secondary/40'
)} data-href={link.href || ''} target={link.target || '_self'}>
{link.label}
</Link>
))}
{config.headerLinks.map((link, index) => (
<Link
key={index}
className={cn(
'relative z-[10] px-3 py-1 rounded-xl text-base font-medium gap-x-1.5 items-center flex select-none',
link.disabled && 'pointer-events-none opacity-50',
pathname === link.href && 'text-black pointer-events-none'
)}
href={link.href}
data-active={pathname === link.href}
>
<link.icon />
{link.title}
</Link>
))}
</div>
</div>
</div>
<UserSide className='mt-6' />
</header>

<UserSide />
</header>
</div>
);
}
2 changes: 1 addition & 1 deletion client/app/components/Header/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import CollapsedHeader from '@/app/components/Header/CollapsedHeader';
import { useMedia } from 'react-use';

export default function Header() {
const collapseHeader = useMedia('(max-width: 815px)', false);
const collapseHeader = useMedia('(max-width: 1205px)', false);

return collapseHeader ? <CollapsedHeader /> : <NotCollapsedHeader />;
}
76 changes: 0 additions & 76 deletions client/app/components/Newspaper/OpenSource.jsx
View file
Open in desktop

This file was deleted.

Loading
Loading