feat: Improve UI navigation and logo visibility
- Update navigation labels: 'Navigation' → 'Ponderants', 'Edit Node' → 'Manual', 'Conversation' → 'Convo', 'Galaxy View' → 'Galaxy' - Improve logo visibility with CSS transform scale(3.5) and higher contrast colors (#E0E0E0, #909296) - Make logo square (viewBox 60x60) for better favicon display - Enhance mobile UX with vertical navigation buttons and text labels - Add 'Profile' label to user menu in navigation - Improve sidebar highlighting with blue color, bold font, and rounded corners - Fix layout issues: adjust chat padding for sidebar (260px) and bottom bar (90px) - Make borders more subtle (#373A40 instead of #dee2e6) - Increase sidebar width to 260px to accommodate logo and text - Remove desktop top bar for cleaner layout - Use IconChartBubbleFilled for galaxy navigation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
*/
|
||||
|
||||
import { Stack, NavLink, Box, Text, Group, Image, Divider } from '@mantine/core';
|
||||
import { IconMessageCircle, IconEdit, IconUniverse } from '@tabler/icons-react';
|
||||
import { IconMessageCircle, IconEdit, IconChartBubbleFilled } from '@tabler/icons-react';
|
||||
import { useSelector } from '@xstate/react';
|
||||
import { useAppMachine } from '@/hooks/useAppMachine';
|
||||
import { UserMenu } from '@/components/UserMenu';
|
||||
@@ -46,20 +46,20 @@ export function DesktopSidebar() {
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRight: '1px solid #dee2e6',
|
||||
borderRight: '1px solid #373A40',
|
||||
padding: '1rem',
|
||||
}}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<Group gap="sm" mb="md" align="center">
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
alt="Ponderants logo"
|
||||
w={48}
|
||||
h={48}
|
||||
style={{ flexShrink: 0 }}
|
||||
/>
|
||||
<Text fw={700} size="md" c="dimmed">
|
||||
<Group gap="sm" mb="lg" align="center" wrap="nowrap">
|
||||
<Box w={32} h={32} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
alt="Ponderants logo"
|
||||
style={{ width: '100%', height: '100%', transform: 'scale(3.5)' }}
|
||||
/>
|
||||
</Box>
|
||||
<Text fw={700} size="xl" style={{ lineHeight: 1 }}>
|
||||
Ponderants
|
||||
</Text>
|
||||
</Group>
|
||||
@@ -70,6 +70,13 @@ export function DesktopSidebar() {
|
||||
active={isConvo}
|
||||
onClick={() => handleNavigation('convo')}
|
||||
variant="filled"
|
||||
color="blue"
|
||||
styles={{
|
||||
root: {
|
||||
borderRadius: '8px',
|
||||
fontWeight: isConvo ? 600 : 400,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<NavLink
|
||||
@@ -78,21 +85,37 @@ export function DesktopSidebar() {
|
||||
active={isEdit}
|
||||
onClick={() => handleNavigation('edit')}
|
||||
variant="filled"
|
||||
color="blue"
|
||||
styles={{
|
||||
root: {
|
||||
borderRadius: '8px',
|
||||
fontWeight: isEdit ? 600 : 400,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<NavLink
|
||||
label="Galaxy"
|
||||
leftSection={<IconUniverse size={20} />}
|
||||
leftSection={<IconChartBubbleFilled size={20} />}
|
||||
active={isGalaxy}
|
||||
onClick={() => handleNavigation('galaxy')}
|
||||
variant="filled"
|
||||
color="blue"
|
||||
styles={{
|
||||
root: {
|
||||
borderRadius: '8px',
|
||||
fontWeight: isGalaxy ? 600 : 400,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Divider my="md" />
|
||||
<Divider my="md" color="#373A40" />
|
||||
|
||||
<Box style={{ padding: '0.5rem' }}>
|
||||
<UserMenu />
|
||||
</Box>
|
||||
<NavLink
|
||||
label="Profile"
|
||||
leftSection={<Box style={{ width: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><UserMenu /></Box>}
|
||||
variant="filled"
|
||||
/>
|
||||
|
||||
{/* Development state panel */}
|
||||
{process.env.NODE_ENV === 'development' && (
|
||||
|
||||
Reference in New Issue
Block a user