shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): close sidebar on mobile when clicking version status

Browse Source
This commit is contained in:
sct
2021-04-14 10:39:07 +09:00
parent dad37e8be6
commit ad67381397
2 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Layout/Sidebar/index.tsx
View File

@@ -174,7 +174,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
</div> </div>
<div <div
ref={navRef} ref={navRef}
className="flex flex-col flex-1 h-0 pt-5 pb-4 overflow-y-auto" className="flex flex-col flex-1 h-0 pt-5 pb-8 overflow-y-auto sm:pb-4"
> >
<div className="flex items-center flex-shrink-0 px-4"> <div className="flex items-center flex-shrink-0 px-4">
<span className="text-xl text-gray-50"> <span className="text-xl text-gray-50">
@@ -223,7 +223,9 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
); );
})} })}
</nav> </nav>
{hasPermission(Permission.ADMIN) && <VersionStatus />} {hasPermission(Permission.ADMIN) && (
<VersionStatus onClick={() => setClosed()} />
)}
</div> </div>
</div> </div>
<div className="flex-shrink-0 w-14"> <div className="flex-shrink-0 w-14">

14
src/components/Layout/VersionStatus/index.tsx
View File

@@ -12,7 +12,11 @@ const messages = defineMessages({
'{commitsBehind} {commitsBehind, plural, one {commit} other {commits}} behind', '{commitsBehind} {commitsBehind, plural, one {commit} other {commits}} behind',
}); });
const VersionStatus: React.FC = () => { interface VersionStatusProps {
onClick?: () => void;
}
const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
const intl = useIntl(); const intl = useIntl();
const { data } = useSWR<StatusResponse>('/api/v1/status', { const { data } = useSWR<StatusResponse>('/api/v1/status', {
refreshInterval: 60 * 1000, refreshInterval: 60 * 1000,
@@ -32,6 +36,14 @@ const VersionStatus: React.FC = () => {
return ( return (
<Link href="/settings/about"> <Link href="/settings/about">
<a <a
onClick={onClick}
onKeyDown={(e) => {
if (e.key === 'Enter' && onClick) {
onClick();
}
}}
role="button"
tabIndex={0}
className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${ className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${
data.updateAvailable data.updateAvailable
? 'bg-yellow-500 text-white hover:bg-yellow-400' ? 'bg-yellow-500 text-white hover:bg-yellow-400'