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

feat: adaptive light mode

Browse Source
This commit is contained in:
WanQuanXie
2024-05-24 20:29:49 +08:00
parent f9664d48e7
commit 996cc1b674
18 changed files with 149 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
ui/components/Sidebar.tsx
View File

@ -4,10 +4,17 @@ import { cn } from '@/lib/utils';
import { BookOpenText, Home, Search, SquarePen, Settings } from 'lucide-react';
import Link from 'next/link';
import { useSelectedLayoutSegments } from 'next/navigation';
import React, { Fragment, useState } from 'react';
import React, { Fragment, useState, type ReactNode } from 'react';
import Layout from './Layout';
import { Dialog, Transition } from '@headlessui/react';
import SettingsDialog from './SettingsDialog';
import { ThemeSwitcher } from './theme/Switcher';
function VerticalIconContainer({ children }: { children: ReactNode }) {
return (
<div className="flex flex-col items-center gap-y-3 w-full">{children}</div>
);
}
const Sidebar = ({ children }: { children: React.ReactNode }) => {
const segments = useSelectedLayoutSegments();
@ -38,31 +45,39 @@ 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-[#111111] px-2 py-8">
<div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-secondLight dark:bg-secondDark px-2 py-8">
<a href="/">
<SquarePen className="text-white cursor-pointer" />
<SquarePen className="cursor-pointer" />
</a>
<div className="flex flex-col items-center gap-y-3 w-full">
<VerticalIconContainer>
{navLinks.map((link, i) => (
<Link
key={i}
href={link.href}
className={cn(
'relative flex flex-row items-center justify-center cursor-pointer hover:bg-white/10 hover:text-white duration-150 transition w-full py-2 rounded-lg',
link.active ? 'text-white' : 'text-white/70',
'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',
link.active
? 'text-black dark:text-white'
: 'text-black/70 dark:text-white/70',
)}
>
<link.icon />
{link.active && (
<div className="absolute right-0 -mr-2 h-full w-1 rounded-l-lg bg-white" />
<div className="absolute right-0 -mr-2 h-full w-1 rounded-l-lg bg-black dark:bg-white" />
)}
</Link>
))}
</div>
<Settings
onClick={() => setIsSettingsOpen(!isSettingsOpen)}
className="text-white cursor-pointer"
/>
</VerticalIconContainer>
<VerticalIconContainer>
<ThemeSwitcher />
<Settings
onClick={() => setIsSettingsOpen(!isSettingsOpen)}
className="cursor-pointer"
/>
</VerticalIconContainer>
<SettingsDialog
isOpen={isSettingsOpen}
setIsOpen={setIsSettingsOpen}
@ -70,7 +85,7 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
</div>
</div>
<div className="fixed bottom-0 w-full z-50 flex flex-row items-center gap-x-6 bg-[#111111] px-4 py-4 shadow-sm lg:hidden">
<div className="fixed bottom-0 w-full z-50 flex flex-row items-center gap-x-6 bg-primaryLight dark:bg-primaryDark px-4 py-4 shadow-sm lg:hidden">
{navLinks.map((link, i) => (
<Link
href={link.href}