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

refactor(ui): change search input design (experiment)

Browse Source
This commit is contained in:
sct
2021-02-06 15:07:12 +00:00
parent baad19a2c9
commit 8956cb3915
7 changed files with 41 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Layout/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import SearchInput from './SearchInput';
import UserDropdown from './UserDropdown';
import Sidebar from './Sidebar';
@@ -14,17 +14,42 @@ const messages = defineMessages({
const Layout: React.FC = ({ children }) => {
const [isSidebarOpen, setSidebarOpen] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);
const { hasPermission } = useUser();
const router = useRouter();
useEffect(() => {
const updateScrolled = () => {
if (window.pageYOffset > 60) {
setIsScrolled(true);
} else {
setIsScrolled(false);
}
};
window.addEventListener('scroll', updateScrolled, { passive: true });
return () => {
window.removeEventListener('scroll', updateScrolled);
};
}, []);
return (
<div className="flex h-full min-w-0 min-h-full bg-gray-900">
<Sidebar open={isSidebarOpen} setClosed={() => setSidebarOpen(false)} />
<div className="relative flex flex-col flex-1 w-0 min-w-0 mb-16 md:ml-64">
<div className="fixed left-0 right-0 z-10 flex flex-shrink-0 h-16 bg-gray-600 shadow md:left-64">
<div
className={`fixed left-0 right-0 z-10 flex flex-shrink-0 h-16 bg-opacity-80 transition duration-300 ${
isScrolled ? 'bg-gray-700' : 'bg-transparent'
} md:left-64`}
style={{
backdropFilter: isScrolled ? 'blur(5px)' : undefined,
WebkitBackdropFilter: isScrolled ? 'blur(5px)' : undefined,
}}
>
<button
className="px-4 text-gray-200 border-r border-gray-800 focus:outline-none focus:bg-gray-300 focus:text-gray-600 md:hidden"
className="px-4 text-gray-200 focus:outline-none focus:bg-gray-300 focus:text-gray-600 md:hidden"
aria-label="Open sidebar"
onClick={() => setSidebarOpen(true)}
>
@@ -42,9 +67,9 @@ const Layout: React.FC = ({ children }) => {
/>
</svg>
</button>
<div className="flex justify-between flex-1 px-4">
<div className="flex justify-between flex-1 pr-4 md:pr-4 md:pl-4">
<SearchInput />
<div className="flex items-center md:ml-6">
<div className="flex items-center ml-2 md:ml-4">
<LanguagePicker />
<UserDropdown />
</div>
@@ -52,7 +77,7 @@ const Layout: React.FC = ({ children }) => {
</div>
<main className="relative z-0 top-16 focus:outline-none" tabIndex={0}>
<div className="pt-2 mb-6">
<div className="mb-6">
<div className="px-4 mx-auto max-w-8xl">
{router.pathname === '/' && hasPermission(Permission.ADMIN) && (
<div className="p-4 mt-6 bg-indigo-700 rounded-md">