remi/Perplexica
1
0
Fork 0
mirror of https://github.com/ItzCrazyKns/Perplexica.git synced 2025-10-18 13:28:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(sidebar): improve UI, use new settings dialog

Browse Source
This commit is contained in:
ItzCrazyKns
2025-10-18 15:10:57 +05:30
parent 97e542acf8
commit 190b6aa79a
1 changed files with 53 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/Sidebar.tsx
View File

@@ -1,20 +1,34 @@
'use client';
import { cn } from '@/lib/utils';
import { BookOpenText, Home, Search, SquarePen, Settings } from 'lucide-react';
import {
BookOpenText,
Home,
Search,
SquarePen,
Settings,
Plus,
ArrowLeft,
} from 'lucide-react';
import Link from 'next/link';
import { useSelectedLayoutSegments } from 'next/navigation';
import React, { useState, type ReactNode } from 'react';
import Layout from './Layout';
import {
Description,
Dialog,
DialogPanel,
DialogTitle,
} from '@headlessui/react';
import SettingsButton from './Settings/SettingsButton';
const VerticalIconContainer = ({ children }: { children: ReactNode }) => {
return (
<div className="flex flex-col items-center gap-y-3 w-full">{children}</div>
);
return <div className="flex flex-col items-center w-full">{children}</div>;
};
const Sidebar = ({ children }: { children: React.ReactNode }) => {
const segments = useSelectedLayoutSegments();
const [isOpen, setIsOpen] = useState<boolean>(true);
const navLinks = [
{
@@ -39,10 +53,13 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
return (
<div>
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-20 lg:flex-col">
<div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-8 mx-2 my-2 rounded-2xl shadow-sm shadow-light-200/10 dark:shadow-black/25">
<a href="/">
<SquarePen className="cursor-pointer" />
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-[72px] lg:flex-col border-r border-light-200 dark:border-dark-200">
<div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-8 shadow-sm shadow-light-200/10 dark:shadow-black/25">
<a
className="p-2.5 rounded-full bg-light-200 text-black/70 dark:bg-dark-200 dark:text-white/70 hover:opacity-70 hover:scale-105 tansition duration-200"
href="/"
>
<Plus size={19} className="cursor-pointer" />
</a>
<VerticalIconContainer>
{navLinks.map((link, i) => (
@@ -50,23 +67,41 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
key={i}
href={link.href}
className={cn(
'relative flex flex-row items-center justify-center cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 duration-150 transition w-full py-2 rounded-lg',
'relative flex flex-col items-center justify-center space-y-0.5 cursor-pointer w-full py-2 rounded-lg',
link.active
? 'text-black dark:text-white'
: 'text-black/70 dark:text-white/70',
? 'text-black/70 dark:text-white/70 '
: 'text-black/60 dark:text-white/60',
)}
>
<link.icon />
{link.active && (
<div className="absolute right-0 -mr-2 h-full w-1 rounded-l-lg bg-black dark:bg-white" />
<div
className={cn(
link.active && 'bg-light-200 dark:bg-dark-200',
'group rounded-lg hover:bg-light-200 hover:dark:bg-dark-200 transition duration-200',
)}
>
<link.icon
size={25}
className={cn(
!link.active && 'group-hover:scale-105',
'transition duration:200 m-1.5',
)}
/>
</div>
<p
className={cn(
link.active
? 'text-black/80 dark:text-white/80'
: 'text-black/60 dark:text-white/60',
'text-[10px]',
)}
>
{link.label}
</p>
</Link>
))}
</VerticalIconContainer>
<Link href="/settings">
<Settings className="cursor-pointer" />
</Link>
<SettingsButton />
</div>
</div>