feat: support menu on mobile

client/src/components/footer.tsx

@@ -44,7 +44,7 @@ function Footer() {
 
 function ThemeButton({ current, mode, label, icon, onClick }: { current: ThemeMode, label: string, mode: ThemeMode, icon: string, onClick: (mode: ThemeMode) => void }) {
     return (<button aria-label={label} type="button" onClick={() => onClick(mode)}
-        className={`rounded-inherit inline-flex h-[32px] w-[32px] items-center justify-center border-0 t-primary ${current === mode ? "bg-w rounded-full shadow-xl shadow-color" : ""}`}>
+        className={`rounded-inherit inline-flex h-[32px] w-[32px] items-center justify-center border-0 t-primary ${current === mode ? "bg-w rounded-full shadow-xl shadow-light" : ""}`}>
         <i className={`${icon}`} />
     </button>)
 }

client/src/components/header.tsx

@@ -1,11 +1,13 @@
 import { useContext } from "react";
+import Popup from "reactjs-popup";
 import { removeCookie } from "typescript-cookie";
 import { Link, useLocation } from "wouter";
 import { oauth_url } from "../main";
 import { Profile, ProfileContext } from "../state/profile";
 import { Icon } from "./icon";
 import { Padding } from "./padding";
 
+
 export function Header() {
     const profile = useContext(ProfileContext);
     const [location, _] = useLocation();
@@ -15,7 +17,7 @@ export function Header() {
                 <div className="w-screen">
                     <Padding className="mx-4 mt-4">
                         <div className="w-full flex justify-between items-center">
-                            <div className="hidden opacity-0 sm:opacity-100 duration-300 mr-auto sm:flex flex-row items-center">
+                            <Link aria-label="首页" href="/" className="hidden opacity-0 sm:opacity-100 duration-300 mr-auto sm:flex flex-row items-center">
                                 <img src={process.env.AVATAR} alt="Avatar" className="w-12 h-12 rounded-2xl border-2" />
                                 <div className="flex flex-col justify-center items-start mx-4">
                                     <p className="text-xl font-bold dark:text-white">
@@ -25,10 +27,10 @@ export function Header() {
                                         {process.env.DESCRIPTION}
                                     </p>
                                 </div>
-                            </div>
+                            </Link>
                             <div className="w-full sm:w-max transition-all duration-500 sm:absolute sm:left-1/2 sm:translate-x-[-50%] flex-row justify-center items-center">
-                                <div className="flex flex-row items-center bg-w t-primary rounded-full px-2 shadow-xl shadow-color">
-                                    <div className="visible opacity-100 sm:hidden sm:opacity-0 duration-300 mr-auto flex flex-row items-center">
+                                <div className="flex flex-row items-center bg-w t-primary rounded-full px-2 shadow-xl shadow-light">
+                                    <Link aria-label="首页" href="/" className="visible opacity-100 sm:hidden sm:opacity-0 duration-300 mr-auto flex flex-row items-center py-2">
                                         <img src={process.env.AVATAR} alt="Avatar" className="w-10 h-10 rounded-full border-2" />
                                         <div className="flex flex-col justify-center items-start mx-2">
                                             <p className="text-sm font-bold">
@@ -38,13 +40,13 @@ export function Header() {
                                                 {process.env.DESCRIPTION}
                                             </p>
                                         </div>
-                                    </div>
+                                    </Link>
                                     <NavItem title="文章" selected={location === "/" || location.startsWith('/feed')} href="/" />
                                     <NavItem title="时间轴" selected={location === "/timeline"} href="/timeline" />
                                     {profile?.permission && <NavItem title="写作" selected={location.startsWith("/writing")} href="/writing" />}
                                     <NavItem title="朋友们" selected={location === "/friends"} href="/friends" />
                                     <NavItem title="关于" selected={location === "/about"} href="/about" />
-                                    <UserAvatar className="visible opacity-100 sm:hidden sm:opacity-0 duration-300 justify-center items-center h-12" profile={profile} />
+                                    <Menu />
                                 </div>
                             </div>
                             <UserAvatar className="ml-auto hidden opacity-0 sm:block sm:opacity-100 duration-300" profile={profile} />
@@ -57,9 +59,9 @@ export function Header() {
     )
 }
 
-function NavItem({ title, selected, href }: { title: string, selected: boolean, href: string }) {
+function NavItem({ title, selected, href, always }: { title: string, selected: boolean, href: string, always?: boolean }) {
     return (
-        <Link href={href} className={"cursor-pointer hover:text-theme duration-300 px-2 py-4 sm:p-4 text-sm " + (selected ? "text-theme" : "dark:text-white")} >
+        <Link href={href} className={`${always ? "" : "hidden"} sm:block cursor-pointer hover:text-theme duration-300 px-2 py-4 sm:p-4 text-sm ${selected ? "text-theme" : "dark:text-white"}`} >
             {title}
         </Link>
     )
@@ -80,12 +82,40 @@ function UserAvatar({ profile, className }: { className?: string, profile?: Prof
         </> : <>
             <button title="Github 登录" aria-label="Github 登录"
                 onClick={() => window.location.href = `${oauth_url}`}
-                className="flex rounded-full sm:rounded-xl border-2 h-10 sm:h-auto px-2 py-2 bg-w bg-hover t-secondary items-center justify-center">
+                className="flex rounded-xl bg-secondary h-10 sm:h-auto px-2 py-2 bg-w bg-hover t-secondary items-center justify-center">
                 <i className="ri-github-line ri-xl"></i>
-                <p className="text-sm ml-1 hidden sm:block ">
+                <p className="text-sm ml-1">
                     Github 登录
                 </p>
             </button>
         </>}
     </div>)
+}
+
+function Menu() {
+    const [location, _] = useLocation();
+    const profile = useContext(ProfileContext);
+    return (
+        <div className="visible sm:hidden sm:flex flex-row items-center">
+            <Popup arrow={false} trigger={
+                <button className="w-10 h-10 rounded-full flex flex-row items-center justify-center">
+                    <i className="ri-menu-line ri-lg" />
+                </button>
+            } position="bottom right"
+                closeOnDocumentClick
+                mouseLeaveDelay={300}
+                mouseEnterDelay={0}
+                overlayStyle={{ background: "rgba(0,0,0,0.3)" }}
+            >
+                <div className="flex flex-col bg-w rounded-xl p-2 mt-4 w-[50vw]">
+                    <UserAvatar profile={profile} />
+                    <NavItem always={true} title="文章" selected={location === "/" || location.startsWith('/feed')} href="/" />
+                    <NavItem always={true} title="时间轴" selected={location === "/timeline"} href="/timeline" />
+                    {profile?.permission && <NavItem always={true} title="写作" selected={location.startsWith("/writing")} href="/writing" />}
+                    <NavItem always={true} title="朋友们" selected={location === "/friends"} href="/friends" />
+                    <NavItem always={true} title="关于" selected={location === "/about"} href="/about" />
+                </div>
+            </Popup>
+        </div>
+    )
 }

client/src/index.css

@@ -9,6 +9,10 @@ textarea:focus {
   outline: none;
 }
 
+.popup-overlay {
+  pointer-events: visible !important;
+}
+
 .wmde-markdown {
   @apply bg-w;
 }
@@ -37,10 +41,14 @@ ul {
   @apply hover:bg-neutral-200 dark:hover:bg-neutral-600;
 }
 
-.shadow-color {
+.shadow-light {
   @apply shadow-neutral-200/30 dark:shadow-black/10;
 }
 
+.shadow-deep {
+  @apply shadow-neutral-200/70 dark:shadow-black/30;
+}
+
 .t-primary {
   @apply text-black dark:text-white;
 }

client/src/page/friends.tsx

@@ -134,7 +134,7 @@ export function FriendsPage() {
                                 <Input value={avatar} setValue={setAvatar} placeholder="头像地址" className="mt-2" />
                                 <Input value={url} setValue={setUrl} placeholder="地址" className="my-2" />
                                 <div className='flex flex-row justify-center'>
-                                    <button onClick={publishButton} className='basis-1/2 bg-theme text-white py-4 rounded-full shadow-xl shadow-color'>创建</button>
+                                    <button onClick={publishButton} className='basis-1/2 bg-theme text-white py-4 rounded-full shadow-xl shadow-light'>创建</button>
                                 </div>
                             </div>
                         </div>

client/src/page/writing.tsx

@@ -205,7 +205,7 @@ export function WritingPage({ id }: { id?: number }) {
       }} className='flex flex-row justify-start t-primary'>
         <div className='xl:basis-1/4 transition-all duration-300' />
         <div className='writeauto xl:basis-11/12 pb-8'>
-          <div className='bg-w rounded-2xl shadow-xl shadow-color p-4'>
+          <div className='bg-w rounded-2xl shadow-xl shadow-light p-4'>
             <div className='visible md:hidden mb-8'>
               <Input id={id} name="title" value={title} setValue={setTitle} placeholder='标题' />
               <Input id={id} name="summary" value={summary} setValue={setSummary} placeholder='摘要' className='mt-4' />
@@ -233,12 +233,12 @@ export function WritingPage({ id }: { id?: number }) {
             </div>
           </div>
           <div className='visible md:hidden flex flex-row justify-center mt-8'>
-            <button onClick={publishButton} className='basis-1/2 bg-theme text-white py-4 rounded-full shadow-xl shadow-color'>发布</button>
+            <button onClick={publishButton} className='basis-1/2 bg-theme text-white py-4 rounded-full shadow-xl shadow-light'>发布</button>
           </div>
         </div>
         <div className='hidden md:visible basis-1/2 md:basis-1/4 md:flex flex-col'>
           <div className='fixed'>
-            <div className='bg-w rounded-2xl shadow-xl shadow-color p-4 my-8 mx-8'>
+            <div className='bg-w rounded-2xl shadow-xl shadow-light p-4 my-8 mx-8'>
               <Input id={id} name="title" value={title} setValue={setTitle} placeholder='标题' />
               <Input id={id} name="summary" value={summary} setValue={setSummary} placeholder='摘要' className='mt-4' />
               <Input id={id} name="tags" value={tags} setValue={setTags} placeholder='标签' className='mt-4' />
@@ -253,7 +253,7 @@ export function WritingPage({ id }: { id?: number }) {
               </div>
             </div>
             <div className='flex flex-row justify-center'>
-              <button onClick={publishButton} className='basis-1/2 bg-theme text-white py-4 rounded-full shadow-xl shadow-color'>发布</button>
+              <button onClick={publishButton} className='basis-1/2 bg-theme text-white py-4 rounded-full shadow-xl shadow-light'>发布</button>
             </div>
           </div>
         </div>