improve mobile UI

seemorg · Feb 25, 2024 · 84a1405 · 84a1405
1 parent c54b1b1
commit 84a1405
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 45 deletions.
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -5,9 +5,9 @@ export default async function HomePage() {
   return (
     <div className="flex min-h-screen w-full items-center bg-primary text-white">
       <Container className="flex flex-col items-center">
-        <h1 className="font-abhaya flex items-center gap-10 text-7xl font-bold">
+        <h1 className="flex flex-col items-center gap-10 font-abhaya text-7xl font-bold md:flex-row">
           <Logo className="h-28 w-auto" />
-          <div className="h-16 w-1 rounded-full bg-white" />
+          <div className="hidden h-16 w-1 rounded-full bg-white md:block" />
           <span className="-mb-2">Library</span>
         </h1>
       </Container>

diff --git a/src/app/[locale]/reader/_components/navbar/index.tsx b/src/app/[locale]/reader/_components/navbar/index.tsx
@@ -4,21 +4,29 @@ import { Logo } from "@/components/Icons";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { Link } from "@/navigation";
-import { Bars3Icon } from "@heroicons/react/20/solid";
+import {
+  Bars3Icon,
+  MagnifyingGlassIcon,
+  XMarkIcon,
+} from "@heroicons/react/20/solid";
 import { LanguageIcon } from "@heroicons/react/24/outline";
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ThemeToggle } from "./theme-toggle";
 import SearchBar from "./search";
 import { useNavbarStore } from "@/stores/navbar";
 
 interface ReaderNavbarProps {
   contentContainerRef: React.RefObject<HTMLDivElement>;
+  sidebarContent: React.ReactNode;
 }
 
 export default function ReaderNavbar({
   contentContainerRef,
+  sidebarContent,
 }: ReaderNavbarProps) {
   const { showNavbar, setShowNavbar } = useNavbarStore();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
 
   useEffect(() => {
     let oldValue = 0;
@@ -47,44 +55,77 @@ export default function ReaderNavbar({
   }, []);
 
   return (
-    <header
-      className={cn(
-        "fixed right-0 top-0 z-30 flex h-20 w-full items-center justify-between gap-4 bg-primary px-4 text-white transition sm:gap-8 lg:pl-10 xl:grid xl:grid-cols-12",
-        showNavbar
-          ? "pointer-events-auto translate-y-0 opacity-100"
-          : "pointer-events-none -translate-y-10 opacity-0",
+    <>
+      <header
+        className={cn(
+          "fixed right-0 top-0 z-30 flex h-16 w-full items-center justify-between gap-4 bg-primary px-4 text-white transition sm:gap-8 lg:h-20 lg:pl-10 xl:grid xl:grid-cols-12",
+          showNavbar
+            ? "pointer-events-auto translate-y-0 opacity-100"
+            : "pointer-events-none -translate-y-10 opacity-0",
+        )}
+      >
+        <div className="xl:col-span-2">
+          <Link href="/">
+            <Logo className="-mt-1 h-[2.3rem] w-auto lg:h-12" />
+          </Link>
+        </div>
+
+        <div className="hidden min-w-0 flex-1 items-center px-4 py-4 md:mx-auto md:max-w-3xl md:px-8 lg:mx-0 lg:flex lg:max-w-none xl:col-span-8 xl:px-0">
+          <SearchBar />
+        </div>
+
+        <div className="flex items-center gap-3 lg:hidden">
+          {/* Mobile menu button */}
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => {
+              setIsMenuOpen(false);
+              setIsSearchOpen(!isSearchOpen);
+            }}
+          >
+            <MagnifyingGlassIcon className="block h-6 w-6" />
+          </Button>
+
+          <Button
+            size="icon"
+            variant="ghost"
+            className="relative"
+            onClick={() => {
+              setIsSearchOpen(false);
+              setIsMenuOpen(!isMenuOpen);
+            }}
+          >
+            <span className="absolute -inset-0.5" />
+            <span className="sr-only">Open menu</span>
+            {isMenuOpen ? (
+              <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
+            ) : (
+              <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
+            )}
+          </Button>
+        </div>
+
+        <div className="hidden lg:flex lg:items-center lg:justify-end lg:gap-3 xl:col-span-2">
+          <ThemeToggle />
+
+          <Button size="icon" variant="ghost">
+            <LanguageIcon className="h-6 w-6" />
+          </Button>
+        </div>
+      </header>
+
+      {isMenuOpen && (
+        <div className="fixed left-0 right-0 top-0 z-[10] pt-10 lg:hidden">
+          {sidebarContent}
+        </div>
       )}
-    >
-      <div className="xl:col-span-2">
-        <Link href="/">
-          <Logo className="-mt-1 h-12 w-auto" />
-        </Link>
-      </div>
-
-      <div className="flex min-w-0 flex-1 items-center px-4 py-4 md:mx-auto md:max-w-3xl md:px-8 lg:mx-0 lg:max-w-none xl:col-span-8 xl:px-0">
-        <SearchBar />
-      </div>
-
-      <div className="flex items-center lg:hidden">
-        {/* Mobile menu button */}
-        <Button size="icon" variant="ghost" className="relative">
-          <span className="absolute -inset-0.5" />
-          <span className="sr-only">Open menu</span>
-          {/* {open ? (
-                      <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
-                    ) : ( */}
-          <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
-          {/* )} */}
-        </Button>
-      </div>
-
-      <div className="hidden lg:flex lg:items-center lg:justify-end lg:gap-3 xl:col-span-2">
-        <ThemeToggle />
-
-        <Button size="icon" variant="ghost">
-          <LanguageIcon className="h-6 w-6" />
-        </Button>
-      </div>
-    </header>
+
+      {isSearchOpen && (
+        <div className="fixed bottom-0 left-0 right-0 top-0 z-[10] h-screen bg-gray-50 pt-20 lg:hidden">
+          <SearchBar autoFocus />
+        </div>
+      )}
+    </>
   );
 }
diff --git a/src/app/[locale]/reader/_components/navbar/search.tsx b/src/app/[locale]/reader/_components/navbar/search.tsx
@@ -21,7 +21,7 @@ import { useBoolean, useDebounceValue } from "usehooks-ts";
  * - sidebar snapping
  */
 
-export default function SearchBar() {
+export default function SearchBar({ autoFocus }: { autoFocus?: boolean }) {
   const [value, setValue] = useState("");
   const focusedState = useBoolean(false);
   const [debouncedValue] = useDebounceValue(value, 300);
@@ -84,6 +84,7 @@ export default function SearchBar() {
           value={value}
           onValueChange={setValue}
           ref={inputRef}
+          autoFocus={autoFocus}
           onFocus={focusedState.setTrue}
           onBlur={focusedState.setFalse}
           isLoading={isPending}

diff --git a/src/app/[locale]/reader/_components/sidebar/sidebar-resizer.tsx b/src/app/[locale]/reader/_components/sidebar/sidebar-resizer.tsx
@@ -48,7 +48,10 @@ export default function SidebarResizer({
 
   return (
     <>
-      <ReaderNavbar contentContainerRef={containerRef} />
+      <ReaderNavbar
+        contentContainerRef={containerRef}
+        sidebarContent={sidebar}
+      />
 
       <ResizablePanelGroup
         direction="horizontal"

diff --git a/src/app/[locale]/reader/_components/sidebar/wrapper.tsx b/src/app/[locale]/reader/_components/sidebar/wrapper.tsx
@@ -13,7 +13,7 @@ export default function SidebarWrapper({
   return (
     <div
       className={cn(
-        "sticky top-0 flex h-screen flex-none flex-col overflow-y-auto bg-slate-50 pt-10 shadow-inner transition-transform will-change-transform",
+        "sticky top-0 flex h-screen flex-none flex-col overflow-y-auto bg-slate-50 pb-16 pt-10 shadow-inner transition-transform will-change-transform",
         showNavbar && "lg:translate-y-14",
       )}
     >