lumither/nocturne
1
0 Fork 0
mirror of https://github.com/Lumither/nocturne.git synced 2026-10-17 10:26:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(navbar) add fix style

Browse Source
This commit is contained in:
lumither committed 2024-05-27 23:35:29 +08:00
1 parent d855df0d6e
commit bfee26609e
2 files changed
+65 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/Navbar.tsx
+48 -48
View File
@@ -65,59 +65,59 @@ function Navbar() {
return ( return (
<> <>
<div className={ `flex flex-col w-full max-w-[256px] mr-2 ml-8 min-h-screen pt-8 sticky` }> <div
<div className={ `flex justify-center items-center my-7` }> className={ `flex flex-col w-full max-w-[256px] mr-2 ml-8 min-h-screen max-h-screen pt-8 sticky` }>
<Image <div className={ `fixed min-h-screen h-full` }>
src={ 'https://avatars.githubusercontent.com/u/46409277?v=4' } <div className={ `flex justify-center items-center my-7` }>
alt={ 'avatar' } <Image
width={ 200 } src={ 'https://avatars.githubusercontent.com/u/46409277?v=4' }
height={ 200 } alt={ 'avatar' }
className={ 'rounded-full justify-self-center' } width={ 200 }
removeWrapper height={ 200 }
></Image> className={ 'rounded-full justify-self-center' }
</div> removeWrapper
></Image>
</div>
<p className={ `font-bold text-2xl` }>Lumither Tao</p> <p className={ `font-bold text-2xl` }>Lumither Tao</p>
<p className={ `text-xl text-zinc-500 dark:text-zinc-400` }>Ad Astra</p> <p className={ `text-xl text-zinc-500 dark:text-zinc-400` }>Ad Astra</p>
<div className={ `flex flex-row items-center my-4 space-x-2` }> <div className={ `flex flex-row items-center my-4 space-x-2` }>
<Link href={ 'https://github.com/Lumither' } aria-label={ `GitHub` }> <Link href={ 'https://github.com/Lumither' } aria-label={ `GitHub` }>
<IoLogoGithub size={ `30px` } /> <IoLogoGithub size={ `30px` } />
</Link> </Link>
<Link href={ 'mailto:lumither@outlook.com' } aria-label={ `email` }> <Link href={ 'mailto:lumither@outlook.com' } aria-label={ `email` }>
<IoMail size={ `30px` } /> <IoMail size={ `30px` } />
</Link> </Link>
</div> </div>
<div <div
className={ `mt-8 -ml-3` }> className={ `mt-8 -ml-3` }>
<ul className={ `flex flex-col space-y-2` }> <ul className={ `flex flex-col space-y-2` }>
{ {
entries.map((meta, key) => ( entries.map((meta, key) => (
<li key={ key }> <li key={ key }>
<Button startContent={ meta.icon } <Button startContent={ meta.icon }
as={ Link } as={ Link }
variant={ `light` } variant={ `light` }
color={ `default` } color={ `default` }
fullWidth fullWidth
className={ 'flex justify-start' } className={ 'flex justify-start' }
// className={ `w-full` } // className={ `w-full` }
aria-label={ `navbar: ${ meta.display_name }` } aria-label={ `navbar: ${ meta.display_name }` }
href={ meta.href }> href={ meta.href }>
<p className={ `font-bold` }>{ meta.display_name }</p> <p className={ `font-bold` }>{ meta.display_name }</p>
</Button> </Button>
</li> </li>
)) ))
} }
</ul> </ul>
</div> </div>
<div <div
className={ `absolute bottom-0 mb-8` } className={ `absolute bottom-8 mb-8` }
> >
<div className={ `flex flex-row justify-center` }>
<ThemeSwitcher /> <ThemeSwitcher />
<p className={ `font-bold` }>{ `Toggle Theme` }</p>
</div> </div>
</div> </div>
</div> </div>
components/ThemeSwitcher.tsx
+17 -14
View File
@@ -18,20 +18,23 @@ function ThemeSwitcher() {
} }
return ( return (
<div> <div className={ `` }>
<Switch <div className={ `flex flex-row items-center` }>
color={ 'default' } <Switch
aria-label={ `theme switch` } color={ 'default' }
startContent={ <MdOutlineLightMode /> } aria-label={ `theme switch` }
endContent={ <MdOutlineDarkMode /> } startContent={ <MdOutlineLightMode /> }
onValueChange={ (isSelected) => { endContent={ <MdOutlineDarkMode /> }
if (isSelected) { onValueChange={ (isSelected) => {
setTheme('light'); if (isSelected) {
} else { setTheme('light');
setTheme('dark'); } else {
} setTheme('dark');
} } }
></Switch> } }
></Switch>
<p className={ `font-bold` }>{ `Toggle Theme` }</p>
</div>
</div> </div>
); );
} }