schalli/tessera-ctl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

style(web): eingeklappte Seitenleiste mit groesseren Symbolen, dichter
Tessera CI/CD / Lint & Type Check (push) Successful in 1m1s
Details
Tessera CI/CD / Tests (push) Successful in 1m33s
Details
Tessera CI/CD / Desktop-Pakete bauen (push) Successful in 20s
Details
Tessera CI/CD / Build & Publish Images (push) Successful in 3m29s
Details

Browse Source 
Kacheln 24 statt 20 px, Navigationssymbole 22 statt 20 px, Eintraege
34 px hoch mit 1 px Abstand (vorher 36 + 2 px) — Nutzerwunsch 29.09.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Schalli
2026-09-29 11:17:47 +02:00
parent cd4b5b56ee
commit 00c2cfe2c9
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/layout/sidebar.tsx
+12 -7
View File
@@ -116,6 +116,11 @@ export function Sidebar() {
const moduleItemClass = (active: boolean) =>
itemClass(active).replace('h-9', 'h-8').replace('gap-3', 'gap-2.5').replace('text-sm', 'text-[13px]');
// Eingeklappt (Nutzerwunsch 29.09.): Symbole etwas groesser (Kachel 24 statt
// 20 px, Navigationssymbole 22 statt 20 px), Eintraege dichter — 34 px hoch
// mit 1 px Abstand statt 36 + 2 px.
const collapsedItemClass = (active: boolean) => itemClass(active).replace('h-9', 'h-[34px]');
const fetchActiveModules = useCallback(async () => {
const loadBuiltIn = async () => {
try {
@@ -203,7 +208,7 @@ export function Sidebar() {
}, [entries, searchQuery, categoryLabel]);
const navIcon = (children: React.ReactNode) => (
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width={isCollapsed ? 22 : 20} height={isCollapsed ? 22 : 20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
{children}
</svg>
);
@@ -211,9 +216,9 @@ export function Sidebar() {
const sidebarContent = (
<div className="flex h-full flex-col bg-sidebar">
<nav className={`flex-1 overflow-y-auto py-3 ${isCollapsed ? 'px-2' : 'px-3'}`}>
<ul className="flex flex-col gap-0.5">
<ul className={`flex flex-col ${isCollapsed ? 'gap-px' : 'gap-0.5'}`}>
<li>
<Link href="/" className={linkClass('/')} aria-label={t('dashboard')} title={isCollapsed ? t('dashboard') : undefined}>
<Link href="/" className={isCollapsed ? collapsedItemClass(isActive('/')) : linkClass('/')} aria-label={t('dashboard')} title={isCollapsed ? t('dashboard') : undefined}>
{isActive('/') && <SelectionPill />}
{navIcon(
<>
@@ -227,7 +232,7 @@ export function Sidebar() {
</Link>
</li>
<li>
<Link href="/marketplace" className={linkClass('/marketplace')} aria-label={t('marketplace')} title={isCollapsed ? t('marketplace') : undefined}>
<Link href="/marketplace" className={isCollapsed ? collapsedItemClass(isActive('/marketplace')) : linkClass('/marketplace')} aria-label={t('marketplace')} title={isCollapsed ? t('marketplace') : undefined}>
{isActive('/marketplace') && <SelectionPill />}
{navIcon(
<>
@@ -242,14 +247,14 @@ export function Sidebar() {
{/* Eingeklappt: nur die Modul-Kacheln untereinander (Name als Tooltip). */}
{isCollapsed && entries.length > 0 && (
<ul className="mt-3 flex flex-col gap-0.5 border-t border-sidebar-border pt-3">
<ul className="mt-3 flex flex-col gap-px border-t border-sidebar-border pt-3">
{entries.map((entry) => {
const active = isEntryActive(entry);
return (
<li key={entry.key}>
<Link href={entry.href} className={itemClass(active)} aria-label={entry.name} title={entry.name}>
<Link href={entry.href} className={collapsedItemClass(active)} aria-label={entry.name} title={entry.name}>
{active && <SelectionPill />}
<ModuleTile slug={entry.tileSlug} size={20} tone={active ? 'accent' : 'neutral'} />
<ModuleTile slug={entry.tileSlug} size={24} tone={active ? 'accent' : 'neutral'} />
</Link>
</li>
);