mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

IMPROVED - Fix dock bar height jump, enlarge icons, refine active state

Browse Source
This commit is contained in:
moh
2026-09-20 19:01:42 +02:00
parent 6c213699a2
commit 6543ccada3
2 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/site-dock.tsx
+19 -20
View File
@@ -186,13 +186,13 @@ export function SiteDock({
>
<Dock
direction="bottom"
iconSize={44}
iconMagnification={74}
iconDistance={150}
className="pointer-events-auto border-border/60 bg-background/70 shadow-panel"
iconSize={50}
iconMagnification={86}
iconDistance={160}
className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
>
{/* Logo — first icon in the dock */}
<DockIcon className="group relative overflow-visible rounded-[30%] border border-border/60 bg-foreground/[0.04]">
<DockIcon className="group relative overflow-visible rounded-[28%] border border-border/60 bg-white shadow-[inset_0_1px_0_rgba(255,255,255,0.5)]">
<Link
href={homeHref}
aria-label="mohfarawati — Home"
@@ -201,9 +201,9 @@ export function SiteDock({
<Image
src={logoSrc}
alt="mohfarawati"
width={80}
height={80}
sizes="80px"
width={96}
height={96}
sizes="96px"
priority
className={cn(
"h-full w-full rounded-full object-contain transition-opacity duration-300",
@@ -214,7 +214,7 @@ export function SiteDock({
<DockTip label="mohfarawati" />
</DockIcon>
<div className="mx-1 h-8 w-px self-center bg-border/70" aria-hidden />
<div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
{navItems.map(({ key, path, Icon, disabled }) => {
const itemPath = path || "/";
@@ -223,7 +223,7 @@ export function SiteDock({
const inner = (
<span className="flex h-full w-full items-center justify-center rounded-[inherit]">
<Icon className="h-[55%] w-[55%]" />
<Icon className="h-[72%] w-[72%]" strokeWidth={1.9} />
</span>
);
@@ -231,14 +231,20 @@ export function SiteDock({
<DockIcon
key={key}
className={cn(
"group relative overflow-visible rounded-[30%] border transition-colors",
"group relative overflow-visible rounded-[28%] border transition-all duration-200",
"shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]",
isActive
? "border-primary/60 bg-primary/10 text-primary"
? "border-primary/50 bg-primary/15 text-primary shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_0_0_1px_hsl(var(--primary)/0.35),0_10px_24px_-8px_hsl(var(--primary)/0.6)]"
: disabled
? "border-border/50 bg-foreground/[0.03] text-foreground/35"
: "border-border/60 bg-foreground/[0.04] text-foreground/80 hover:text-foreground",
: "border-border/60 bg-foreground/[0.05] text-foreground/75 hover:border-border hover:bg-foreground/[0.09] hover:text-foreground",
)}
>
{/* top gloss */}
<span
aria-hidden
className="pointer-events-none absolute inset-0 rounded-[inherit] bg-gradient-to-b from-white/10 to-transparent"
/>
{disabled ? (
<span aria-disabled="true" className="flex h-full w-full cursor-not-allowed items-center justify-center">
{inner}
@@ -255,13 +261,6 @@ export function SiteDock({
)}
<DockTip label={label} soon={disabled ? t("soon") : undefined} />
{isActive ? (
<span
aria-hidden
className="absolute -bottom-1.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-primary"
/>
) : null}
</DockIcon>
);
})}