feat(odin): use the Odin mark as the sidebar nav icon
Replace the chat-bubble glyph on the "Odin" nav item with the OdinMark, and
make the mark's SVG sizing !important so the nav's `& svg { width:18 }` rule
can't shrink it (its `size` prop stays authoritative everywhere).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -29,8 +29,10 @@ const glow = keyframes`
|
||||
const Glyph = styled("svg", {
|
||||
shouldForwardProp: (p) => p !== "thinking" && p !== "reduce",
|
||||
})<{ thinking: boolean; reduce: boolean }>(({ thinking, reduce }) => ({
|
||||
width: "70%",
|
||||
height: "70%",
|
||||
// !important so an ancestor `& svg { width }` rule (e.g. SidebarNav forces
|
||||
// 18px) can't override the mark's own sizing — `size` stays authoritative.
|
||||
width: "70% !important",
|
||||
height: "70% !important",
|
||||
overflow: "visible",
|
||||
display: "block",
|
||||
...(reduce
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { type ReactNode } from "react";
|
||||
import OdinMark from "../components/odin/OdinMark";
|
||||
|
||||
export interface MenuItem {
|
||||
path: string;
|
||||
@@ -43,16 +44,7 @@ export const menuSections: MenuSection[] = [
|
||||
label: "Odin",
|
||||
permission: "ai.use",
|
||||
end: true,
|
||||
icon: (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
|
||||
</svg>
|
||||
),
|
||||
icon: <OdinMark size={22} />,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user