thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved Sidebar styling

Browse Source
This commit is contained in:
Tim Howitz 2025-06-01 14:18:44 +01:00
parent f88f783de9
commit 6cd95fa0e4
1 changed files with 116 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Sidebar.tsx
View File

@ -1,6 +1,6 @@
import React, { Dispatch, SetStateAction, useEffect, useRef } from "react"; import React, { Dispatch, SetStateAction, useEffect, useRef } from "react";
import { TbHexagon } from "react-icons/tb"; import { TbHexagon } from "react-icons/tb";
import GeologicalEvent from "@appTypes/Event"; import GeologicalEvent from "@appTypes/GeologicalEvent";
import getMagnitudeColor from "@utils/getMagnitudeColour"; import getMagnitudeColor from "@utils/getMagnitudeColour";
interface SidebarProps { interface SidebarProps {
logTitle: string; logTitle: string;
@ -71,13 +71,13 @@ export default function Sidebar({
<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p> <p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
<button <button
className={`mt-4 w-full py-2 px-4 rounded-lg transition-colors duration-200 font-medium className={`mt-4 w-full py-2 px-4 rounded-lg transition-colors duration-200 font-medium
${button1Disabled ${
button1Disabled
? "bg-gray-300 text-gray-500 cursor-not-allowed" ? "bg-gray-300 text-gray-500 cursor-not-allowed"
: "bg-blue-600 hover:bg-blue-700 text-white" : "bg-blue-600 hover:bg-blue-700 text-white"
}`} }`}
onClick={onButton1Click} onClick={onButton1Click}
type="button" type="button"
tabIndex={button1Disabled ? -1 : 0} tabIndex={button1Disabled ? -1 : 0}
aria-disabled={button1Disabled ? "true" : "false"} aria-disabled={button1Disabled ? "true" : "false"}
> >
@ -100,9 +100,13 @@ export default function Sidebar({
<button <button
key={event.id} key={event.id}
data-event-id={event.id} data-event-id={event.id}
className={`w-full border ${hoveredEventId === event.id ? "bg-neutral-100" : "bg-white"} ${ className={`w-full border ${
selectedEventId === event.id ? "border-neutral-800" : "border-neutral-200" selectedEventId === event.id
} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 shadow-sm text-left`} ? "border-neutral-500 border-2 shadow-md"
: hoveredEventId === event.id
? "bg-neutral-100 shadow-sm"
: "bg-white border-neutral-200 shadow-sm"
} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 text-left`}
onClick={() => { onClick={() => {
setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : "")); setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : ""));
}} }}