egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

customizable icon color

Browse Source
This commit is contained in:
Daniel
2023-06-02 15:29:52 +03:30
parent 3e6bef875b
commit be180d34e2
11 changed files with 165 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Sidebar/SidebarItem.tsx
+13 -3
View File
@@ -7,9 +7,16 @@ interface SidebarItemProps {
icon: ReactElement;
path: string;
className?: string;
iconColor?: string;
}
export default function ({ text, icon, path, className }: SidebarItemProps) {
export default function ({
text,
icon,
path,
className,
iconColor,
}: SidebarItemProps) {
const router = useRouter();
const [active, setActive] = useState(false);
@@ -23,10 +30,13 @@ export default function ({ text, icon, path, className }: SidebarItemProps) {
<div
className={`${
active ? "bg-sky-500" : "hover:bg-slate-200 bg-gray-100"
} duration-100 py-1 px-4 cursor-pointer flex items-center gap-2 w-full ${className}`}
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md ${className}`}
>
{React.cloneElement(icon, {
className: `w-4 h-4 ${active ? "text-white" : "text-sky-300"}`,
className: "w-4 h-4",
style: {
color: active ? "white" : iconColor ? iconColor : "#7dd3fc",
},
})}
<p
className={`${active ? "text-white" : "text-sky-900"} truncate w-4/6`}
components/Sidebar/index.tsx
+71 -66
View File
@@ -27,84 +27,88 @@ export default function ({ className }: { className?: string }) {
return (
<div
className={`bg-gray-100 h-screen w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 border z-20 ${className}`}
className={`bg-gray-100 h-screen w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 px-2 border z-20 ${className}`}
>
<p className="p-4 text-sky-500 font-bold text-2xl my-2 leading-4">
<p className="p-3 text-sky-500 font-bold text-2xl my-2 leading-4">
Linkwarden
</p>
<Link href="/dashboard">
<div
className={`${
active === "/dashboard"
? "bg-sky-500"
: "hover:bg-slate-200 bg-gray-100"
} outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
>
<FontAwesomeIcon
icon={faChartSimple}
className={`w-4 h-4 ${
active === "/dashboard" ? "text-white" : "text-sky-300"
}`}
/>
<p
<div className="flex flex-col gap-1">
<Link href="/dashboard">
<div
className={`${
active === "/dashboard" ? "text-white" : "text-sky-900"
}`}
active === "/dashboard"
? "bg-sky-500"
: "hover:bg-slate-200 bg-gray-100"
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
>
Dashboard
</p>
</div>
</Link>
<FontAwesomeIcon
icon={faChartSimple}
className={`w-4 h-4 ${
active === "/dashboard" ? "text-white" : "text-sky-300"
}`}
/>
<p
className={`${
active === "/dashboard" ? "text-white" : "text-sky-900"
}`}
>
Dashboard
</p>
</div>
</Link>
<Link href="/collections">
<div
className={`${
active === "/collections" ? "bg-sky-500" : "hover:bg-slate-200"
} outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
>
<FontAwesomeIcon
icon={faBox}
className={`w-4 h-4 ${
active === "/collections" ? "text-white" : "text-sky-300"
}`}
/>
<p
<Link href="/collections">
<div
className={`${
active === "/collections" ? "text-white" : "text-sky-900"
}`}
active === "/collections" ? "bg-sky-500" : "hover:bg-slate-200"
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
>
All Collections
</p>
</div>
</Link>
<FontAwesomeIcon
icon={faBox}
className={`w-4 h-4 ${
active === "/collections" ? "text-white" : "text-sky-300"
}`}
/>
<p
className={`${
active === "/collections" ? "text-white" : "text-sky-900"
}`}
>
All Collections
</p>
</div>
</Link>
<Link href="/links">
<div
className={`${
active === "/links"
? "bg-sky-500"
: "hover:bg-slate-200 bg-gray-100"
} outline-sky-100 outline-1 duration-100 py-1 px-4 cursor-pointer flex items-center gap-2`}
>
<FontAwesomeIcon
icon={faBookmark}
className={`w-4 h-4 ${
active === "/links" ? "text-white" : "text-sky-300"
}`}
/>
<p
className={`${active === "/links" ? "text-white" : "text-sky-900"}`}
<Link href="/links">
<div
className={`${
active === "/links"
? "bg-sky-500"
: "hover:bg-slate-200 bg-gray-100"
} outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
>
All Links
</p>
</div>
</Link>
<FontAwesomeIcon
icon={faBookmark}
className={`w-4 h-4 ${
active === "/links" ? "text-white" : "text-sky-300"
}`}
/>
<p
className={`${
active === "/links" ? "text-white" : "text-sky-900"
}`}
>
All Links
</p>
</div>
</Link>
</div>
<div className="text-gray-500 mt-5">
<p className="text-sm px-4 mb-2">Collections</p>
<p className="text-sm mb-2 pl-3 font-semibold">Collections</p>
</div>
<div>
<div className="flex flex-col gap-1">
{collections
.sort((a, b) => a.name.localeCompare(b.name))
.map((e, i) => {
@@ -113,6 +117,7 @@ export default function ({ className }: { className?: string }) {
key={i}
text={e.name}
icon={<FontAwesomeIcon icon={faFolder} />}
iconColor={e.color}
path={`/collections/${e.id}`}
className="capitalize"
/>
@@ -120,9 +125,9 @@ export default function ({ className }: { className?: string }) {
})}
</div>
<div className="text-gray-500 mt-5">
<p className="text-sm px-4 mb-2">Tags</p>
<p className="text-sm mb-2 pl-3 font-semibold">Tags</p>
</div>
<div>
<div className="flex flex-col gap-1">
{tags
.sort((a, b) => a.name.localeCompare(b.name))
.map((e, i) => {