dylan/vod-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE Dropdown and Topbar components for improved styling and functionality

Browse Source
This commit is contained in:
Dylan De Faoite
2025-06-25 16:44:37 +02:00
parent 38f3778a6b
commit 7c64649c22
2 changed files with 4 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Dropdown.tsx
View File

@@ -47,12 +47,12 @@ const Dropdown = ({ label, children, className }: DropdownProps) => {
ref={ref}> ref={ref}>
<button <button
onClick={toggleDropdown} onClick={toggleDropdown}
className="inline-flex justify-between w-full rounded-xl border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-600 hover:bg-gray-50" className="inline-flex justify-between w-full rounded-xl px-4 py-2 bg-white text-sm font-medium text-gray-600 hover:bg-gray-50"
> >
{label} {label}
</button> </button>
{isOpen && ( {isOpen && (
<ul className="absolute w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"> <ul className="absolute w-48 origin-top-right rounded-md bg-white shadow-lg font-medium">
{children} {children}
</ul> </ul>
)} )}

11
frontend/src/components/Topbar.tsx
View File

@@ -25,21 +25,14 @@ const Topbar = ({sidebarToggled, setSidebarToggled, user, className}: props) =>
{ user ? ( { user ? (
<div> <div>
<img <img
className={"w-8 h-8 rounded-full inline-block mr-2"} className={"w-8 h-8 rounded-full inline-block"}
src={user.profilePicture} src={user.profilePicture}
referrerPolicy="no-referrer" referrerPolicy="no-referrer"
/> />
<Dropdown label={user.name}> <Dropdown label={user.name}>
<DropdownItem item="Logout" onClick={() => globalThis.location.href = logoutUrl} className="text-red-600" /> <DropdownItem item="Logout" onClick={() => globalThis.location.href = logoutUrl} className={"text-red-500 font-medium"} />
</Dropdown> </Dropdown>
{/*<Dropdown label={user.name}>*/}
{/* <DropdownItem>*/}
{/* <a href={logoutUrl}>Logout</a>*/}
{/* </DropdownItem>*/}
{/*</Dropdown>*/}
</div> </div>
) : ) :
( (