helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-11 18:28:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

changed colors in sidebar

Browse Source
This commit is contained in:
moulichand16
2026-03-31 12:30:27 +05:30
parent 30b59be604
commit 65450ddd3e
5 changed files with 40 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/layout/sidebar.tsx
View File

@@ -151,9 +151,9 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
const content = (
<aside
style={{ "--width": `${width}px` } as React.CSSProperties}
style={{ "--width": `${width}px`, backgroundColor: 'rgb(28, 33, 44)' } as React.CSSProperties}
className={cx(
"flex h-full w-full max-w-full flex-col justify-between overflow-auto border-secondary bg-primary pt-4 shadow-xs transition-all duration-200 ease-linear md:border-r lg:w-(--width) lg:rounded-xl lg:border lg:pt-5",
"flex h-full w-full max-w-full flex-col justify-between overflow-auto pt-4 shadow-xs transition-all duration-200 ease-linear lg:w-(--width) lg:pt-5",
)}
>
{/* Logo + collapse toggle */}
@@ -162,8 +162,8 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
<img src="/favicon-32.png" alt="Helix Engage" className="size-8 rounded-lg shrink-0" />
) : (
<div className="flex flex-col gap-1">
<span className="text-md font-bold text-primary">Helix Engage</span>
<span className="text-xs text-tertiary">Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
<span className="text-md font-bold" style={{ color: 'rgb(255, 255, 255)'}}>Helix Engage</span>
<span className="text-xs" style={{ color: 'rgb(255, 255, 255)' }}>Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
</div>
)}
<button
@@ -191,11 +191,15 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
<Link
to={item.href ?? '/'}
title={item.label}
style={item.href !== activeUrl ? {
'--hover-bg': 'rgb(42, 48, 60)',
'--hover-text': 'rgb(73, 160, 225)'
} as React.CSSProperties : undefined}
className={cx(
"flex size-10 items-center justify-center rounded-lg transition duration-100 ease-linear",
item.href === activeUrl
? "bg-active text-fg-brand-primary"
: "text-fg-quaternary hover:bg-primary_hover hover:text-fg-secondary",
: "text-fg-quaternary hover:bg-[var(--hover-bg)] hover:text-[var(--hover-text)]",
)}
>
{item.icon && <item.icon className="size-5" />}
@@ -249,9 +253,9 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
return (
<>
<MobileNavigationHeader>{content}</MobileNavigationHeader>
<div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:py-1 lg:pl-1">{content}</div>
<div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex">{content}</div>
<div
style={{ paddingLeft: width + 4 }}
style={{ paddingLeft: width }}
className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block transition-all duration-200 ease-linear"
/>