boki/stock-bot
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

finished initial symbols pages

Browse source
This commit is contained in:
Boki 2025-07-02 20:53:26 -04:00
parent 62706cdb42
commit 4e4a048988
13 changed files with 688 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

107
apps/stock/web-app/src/components/layout/Sidebar.tsx
View file

@ -2,8 +2,8 @@ import { navigation } from '@/lib/constants';
import type { NavigationItem } from '@/lib/constants';
import { cn } from '@/lib/utils';
import { Dialog, Transition } from '@headlessui/react';
import { XMarkIcon, ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
import { Fragment, useState } from 'react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Fragment } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
interface SidebarProps {
@ -78,29 +78,6 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
function SidebarContent() {
const location = useLocation();
// Auto-expand items that have active children
const getInitialExpanded = () => {
const expanded = new Set<string>();
navigation.forEach(item => {
if (item.children && item.children.some(child => location.pathname === child.href)) {
expanded.add(item.name);
}
});
return expanded;
};
const [expandedItems, setExpandedItems] = useState<Set<string>>(getInitialExpanded());
const toggleExpanded = (name: string) => {
const newExpanded = new Set(expandedItems);
if (newExpanded.has(name)) {
newExpanded.delete(name);
} else {
newExpanded.add(name);
}
setExpandedItems(newExpanded);
};
const isChildActive = (children: NavigationItem[]) => {
return children.some(child => location.pathname === child.href);
@ -119,12 +96,11 @@ function SidebarContent() {
<li key={item.name}>
{item.children ? (
<>
<button
onClick={() => toggleExpanded(item.name)}
<div
className={cn(
isChildActive(item.children)
? 'bg-surface-secondary text-primary-400'
: 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
: 'text-text-secondary',
'group flex w-full gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
)}
>
@ -132,52 +108,45 @@ function SidebarContent() {
className={cn(
isChildActive(item.children)
? 'text-primary-400'
: 'text-text-muted group-hover:text-primary-400',
: 'text-text-muted',
'h-4 w-4 shrink-0 transition-colors'
)}
aria-hidden="true"
/>
<span className="flex-1 text-left">{item.name}</span>
{expandedItems.has(item.name) ? (
<ChevronDownIcon className="h-3 w-3 text-text-muted" />
) : (
<ChevronRightIcon className="h-3 w-3 text-text-muted" />
)}
</button>
{expandedItems.has(item.name) && (
<ul className="mt-1 space-y-0.5 pl-8">
{item.children.map(child => (
<li key={child.name}>
<NavLink
to={child.href || ''}
className={({ isActive }) =>
cn(
isActive
? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
: 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
'group flex gap-x-2 rounded-r-md px-2 py-1 text-sm leading-tight font-medium transition-colors'
)
}
>
{({ isActive }) => (
<>
<child.icon
className={cn(
isActive
? 'text-primary-400'
: 'text-text-muted group-hover:text-primary-400',
'h-3 w-3 shrink-0 transition-colors'
)}
aria-hidden="true"
/>
{child.name}
</>
)}
</NavLink>
</li>
))}
</ul>
)}
</div>
<ul className="mt-1 space-y-0.5 pl-5">
{item.children.map(child => (
<li key={child.name}>
<NavLink
to={child.href || ''}
className={({ isActive }) =>
cn(
isActive
? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
: 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
'group flex gap-x-2 rounded-r-md px-2 py-1 text-sm leading-tight font-medium transition-colors'
)
}
>
{({ isActive }) => (
<>
<child.icon
className={cn(
isActive
? 'text-primary-400'
: 'text-text-muted group-hover:text-primary-400',
'h-3 w-3 shrink-0 transition-colors'
)}
aria-hidden="true"
/>
{child.name}
</>
)}
</NavLink>
</li>
))}
</ul>
</>
) : (
<NavLink