mirror of
https://github.com/Lumither/nocturne.git
synced 2026-10-17 18:36:21 +00:00
feat(navbar) update navbar
This commit is contained in:
7 files changed
+173
-47
No files matched your search
+100
-32
@@ -14,6 +14,7 @@ import {
|
||||
} from 'react-icons/io5';
|
||||
import Link from 'next/link';
|
||||
import ThemeSwitcher from '@/components/ThemeSwitcher';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const entries: { display_name: string; href: string; icon: React.ReactNode }[] = [
|
||||
{
|
||||
@@ -39,7 +40,7 @@ const entries: { display_name: string; href: string; icon: React.ReactNode }[] =
|
||||
{
|
||||
icon: <IoFileTrayFull size={ `20px` }></IoFileTrayFull>,
|
||||
display_name: 'Archive',
|
||||
href: '/Archive'
|
||||
href: '/archive'
|
||||
},
|
||||
{
|
||||
icon: <IoSearch size={ `20px` }></IoSearch>,
|
||||
@@ -48,9 +49,21 @@ const entries: { display_name: string; href: string; icon: React.ReactNode }[] =
|
||||
}
|
||||
];
|
||||
|
||||
const connections: { label: string, href: string, icon: React.ReactNode }[] = [
|
||||
{
|
||||
label: 'Github',
|
||||
href: 'https://github.com/Lumither',
|
||||
icon: <IoLogoGithub size={ `30px` } />
|
||||
},
|
||||
{
|
||||
label: 'email',
|
||||
href: 'mailto:lumither@outlook.com',
|
||||
icon: <IoMail size={ `30px` } />
|
||||
}
|
||||
];
|
||||
|
||||
function Navbar() {
|
||||
const [ scrolled, setScrolled ] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const isScrolled = window.scrollY > 0;
|
||||
@@ -63,50 +76,99 @@ function Navbar() {
|
||||
}, []);
|
||||
|
||||
|
||||
const path = usePathname();
|
||||
const [ shownPath, setShownPath ] = useState(path);
|
||||
useEffect(() => {
|
||||
let trimmed_path = path.split(`/`)[1];
|
||||
if (trimmed_path === '') {
|
||||
setShownPath('HOME');
|
||||
} else {
|
||||
setShownPath(trimmed_path.toUpperCase());
|
||||
}
|
||||
}, [ path ]);
|
||||
|
||||
|
||||
const minMobileWidth: number = 768;
|
||||
const [ isMobile, setIsMobile ] = useState(false);
|
||||
useEffect(() => {
|
||||
const updateMobileWidth = () => {
|
||||
if (window.innerWidth <= minMobileWidth) {
|
||||
setIsMobile(true);
|
||||
} else {
|
||||
setIsMobile(false);
|
||||
}
|
||||
};
|
||||
updateMobileWidth();
|
||||
window.addEventListener('resize', updateMobileWidth);
|
||||
return () => {
|
||||
window.removeEventListener('resize', updateMobileWidth);
|
||||
};
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={ `flex flex-col w-full max-w-[256px] mr-2 ml-8 min-h-screen max-h-screen pt-8 sticky` }>
|
||||
className={ `flex flex-col w-auto md:w-full min-w-[50px] max-w-[256px] mr-2 ml-8 min-h-screen max-h-screen pt-8 sticky` }>
|
||||
<div className={ `fixed min-h-screen h-full` }>
|
||||
<div className={ `flex justify-center items-center my-7` }>
|
||||
<Image
|
||||
src={ 'https://avatars.githubusercontent.com/u/46409277?v=4' }
|
||||
alt={ 'avatar' }
|
||||
width={ 200 }
|
||||
height={ 200 }
|
||||
className={ 'rounded-full justify-self-center' }
|
||||
removeWrapper
|
||||
></Image>
|
||||
<div className={ `hidden md:block` }>
|
||||
<div className={ `flex justify-center items-center my-7` }>
|
||||
<Image
|
||||
src={ 'https://avatars.githubusercontent.com/u/46409277?v=4' }
|
||||
alt={ 'avatar' }
|
||||
width={ 200 }
|
||||
height={ 200 }
|
||||
className={ 'rounded-full justify-self-center' }
|
||||
removeWrapper
|
||||
></Image>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className={ `font-bold text-2xl` }>Lumither Tao</p>
|
||||
<p className={ `text-xl text-zinc-500 dark:text-zinc-400` }>Ad Astra</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className={ `font-bold text-2xl` }>Lumither Tao</p>
|
||||
<p className={ `text-xl text-zinc-500 dark:text-zinc-400` }>Ad Astra</p>
|
||||
<div>
|
||||
<ul className={ `flex flex-col space-y-2 md:space-y-0 md:flex-row items-center my-4 md:space-x-2` }>
|
||||
{
|
||||
connections.map((conn, key) => (
|
||||
<li key={ key }>
|
||||
<Button as={ Link }
|
||||
href={ conn.href }
|
||||
aria-label={ conn.label }
|
||||
variant={ `light` }
|
||||
color={ `default` }
|
||||
className={ `w-fit` }
|
||||
isIconOnly
|
||||
>
|
||||
{ conn.icon }
|
||||
</Button>
|
||||
</li>
|
||||
))
|
||||
|
||||
<div className={ `flex flex-row items-center my-4 space-x-2` }>
|
||||
<Link href={ 'https://github.com/Lumither' } aria-label={ `GitHub` }>
|
||||
<IoLogoGithub size={ `30px` } />
|
||||
</Link>
|
||||
<Link href={ 'mailto:lumither@outlook.com' } aria-label={ `email` }>
|
||||
<IoMail size={ `30px` } />
|
||||
</Link>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={ `mt-8 -ml-3` }>
|
||||
className={ `mt-8 ml-0 md:-ml-3` }>
|
||||
<ul className={ `flex flex-col space-y-2` }>
|
||||
{
|
||||
entries.map((meta, key) => (
|
||||
<li key={ key }>
|
||||
<Button startContent={ meta.icon }
|
||||
as={ Link }
|
||||
variant={ `light` }
|
||||
color={ `default` }
|
||||
fullWidth
|
||||
className={ 'flex justify-start' }
|
||||
// className={ `w-full` }
|
||||
aria-label={ `navbar: ${ meta.display_name }` }
|
||||
href={ meta.href }>
|
||||
<p className={ `font-bold` }>{ meta.display_name }</p>
|
||||
<Button
|
||||
as={ Link }
|
||||
variant={ `light` }
|
||||
color={ `default` }
|
||||
fullWidth
|
||||
isIconOnly={ isMobile }
|
||||
className={ 'flex md:justify-start w-fit md:w-full' }
|
||||
aria-label={ `navbar: ${ meta.display_name }` }
|
||||
href={ meta.href }>
|
||||
{ meta.icon }
|
||||
<p className={ `font-bold hidden md:block` }>{ meta.display_name }</p>
|
||||
</Button>
|
||||
</li>
|
||||
))
|
||||
@@ -114,6 +176,12 @@ function Navbar() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={ `mt-8 md:hidden` }>
|
||||
<p className={ `sideways-lr font-bold text-2xl text-zinc-500 dark:text-zinc-400` }>
|
||||
{ shownPath }
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={ `absolute bottom-8 mb-8` }
|
||||
>
|
||||
|
||||
Reference in new issue
Block a user