fix mobile options
This commit is contained in:
parent
f02393dbe9
commit
9bfe56f7ce
|
@ -1,5 +1,4 @@
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { BookOpenText, Home, Search, SquarePen, Settings } from 'lucide-react';
|
import { BookOpenText, Home, Search, SquarePen, Settings } from 'lucide-react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
@ -79,13 +78,13 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="fixed bottom-0 w-full z-50 flex flex-row items-center gap-x-6 bg-light-primary dark:bg-dark-primary px-4 py-4 shadow-sm lg:hidden">
|
<div className="fixed bottom-0 w-full z-50 flex flex-row items-center justify-between bg-light-primary dark:bg-dark-primary px-4 py-4 shadow-sm lg:hidden">
|
||||||
{navLinks.map((link, i) => (
|
{navLinks.map((link, i) => (
|
||||||
<Link
|
<Link
|
||||||
href={link.href}
|
href={link.href}
|
||||||
key={i}
|
key={i}
|
||||||
className={cn(
|
className={cn(
|
||||||
'relative flex flex-col items-center space-y-1 text-center w-full',
|
'relative flex flex-col items-center space-y-1 text-center',
|
||||||
link.active
|
link.active
|
||||||
? 'text-black dark:text-white'
|
? 'text-black dark:text-white'
|
||||||
: 'text-black dark:text-white/70',
|
: 'text-black dark:text-white/70',
|
||||||
|
@ -98,6 +97,16 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
|
||||||
<p className="text-xs">{link.label}</p>
|
<p className="text-xs">{link.label}</p>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsSettingsOpen(!isSettingsOpen)}
|
||||||
|
className={cn(
|
||||||
|
'relative flex flex-col items-center space-y-1 text-center',
|
||||||
|
'text-black dark:text-white/70',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Settings />
|
||||||
|
<p className="text-xs">Settings</p>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Layout>{children}</Layout>
|
<Layout>{children}</Layout>
|
||||||
|
|
Loading…
Reference in New Issue