mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
fix: mobile header
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { last } from "lodash-es";
|
||||
import { Globe2Icon, HomeIcon } from "lucide-react";
|
||||
import { ArchiveIcon, Globe2Icon, HomeIcon } from "lucide-react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { matchPath, NavLink, useLocation } from "react-router-dom";
|
||||
import useDebounce from "react-use/lib/useDebounce";
|
||||
@@ -44,8 +44,14 @@ const HomeSidebar = observer((props: Props) => {
|
||||
title: t("common.explore"),
|
||||
icon: <Globe2Icon className="w-4 h-auto opacity-70 shrink-0" />,
|
||||
};
|
||||
const archivedNavLink: NavLinkItem = {
|
||||
id: "header-archived",
|
||||
path: Routes.ARCHIVED,
|
||||
title: t("common.archived"),
|
||||
icon: <ArchiveIcon className="w-4 h-auto opacity-70 shrink-0" />,
|
||||
};
|
||||
|
||||
const navLinks: NavLinkItem[] = currentUser ? [homeNavLink, exploreNavLink] : [exploreNavLink];
|
||||
const navLinks: NavLinkItem[] = currentUser ? [homeNavLink, exploreNavLink, archivedNavLink] : [exploreNavLink];
|
||||
|
||||
useDebounce(
|
||||
async () => {
|
||||
|
@@ -1,5 +1,5 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import { ArchiveIcon, BellIcon, PaperclipIcon, SettingsIcon, UserCircleIcon } from "lucide-react";
|
||||
import { BellIcon, PaperclipIcon, SettingsIcon, UserCircleIcon } from "lucide-react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useEffect } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
@@ -57,12 +57,6 @@ const Navigation = observer((props: Props) => {
|
||||
</>
|
||||
),
|
||||
};
|
||||
const archivedNavLink: NavLinkItem = {
|
||||
id: "header-archived",
|
||||
path: Routes.ARCHIVED,
|
||||
title: t("common.archived"),
|
||||
icon: <ArchiveIcon className="w-6 h-auto opacity-70 shrink-0" />,
|
||||
};
|
||||
const settingNavLink: NavLinkItem = {
|
||||
id: "header-setting",
|
||||
path: Routes.SETTING,
|
||||
@@ -76,7 +70,7 @@ const Navigation = observer((props: Props) => {
|
||||
icon: <UserCircleIcon className="w-6 h-auto opacity-70 shrink-0" />,
|
||||
};
|
||||
|
||||
const navLinks: NavLinkItem[] = currentUser ? [resourcesNavLink, inboxNavLink, archivedNavLink, settingNavLink] : [signInNavLink];
|
||||
const navLinks: NavLinkItem[] = currentUser ? [resourcesNavLink, inboxNavLink, settingNavLink] : [signInNavLink];
|
||||
|
||||
return (
|
||||
<header
|
||||
|
@@ -32,7 +32,6 @@ const UserBanner = (props: Props) => {
|
||||
"w-auto flex flex-row justify-start items-center cursor-pointer text-gray-800 dark:text-gray-400",
|
||||
collapsed ? "px-1" : "px-3",
|
||||
)}
|
||||
onClick={() => navigateTo(currentUser ? Routes.ROOT : Routes.EXPLORE)}
|
||||
>
|
||||
{currentUser.avatarUrl ? (
|
||||
<UserAvatar className="shrink-0" avatarUrl={currentUser.avatarUrl} />
|
||||
|
@@ -5,12 +5,14 @@ import { useEffect } from "react";
|
||||
import Empty from "@/components/Empty";
|
||||
import MemoCommentMessage from "@/components/Inbox/MemoCommentMessage";
|
||||
import MobileHeader from "@/components/MobileHeader";
|
||||
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
|
||||
import { userStore } from "@/store/v2";
|
||||
import { Inbox_Status, Inbox_Type } from "@/types/proto/api/v1/inbox_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
const Inboxes = observer(() => {
|
||||
const t = useTranslate();
|
||||
const { md } = useResponsiveWidth();
|
||||
const inboxes = sortBy(userStore.state.inboxes, (inbox) => {
|
||||
if (inbox.status === Inbox_Status.UNREAD) return 0;
|
||||
if (inbox.status === Inbox_Status.ARCHIVED) return 1;
|
||||
@@ -23,7 +25,7 @@ const Inboxes = observer(() => {
|
||||
|
||||
return (
|
||||
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
|
||||
<MobileHeader />
|
||||
{!md && <MobileHeader />}
|
||||
<div className="w-full px-4 sm:px-6">
|
||||
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
|
||||
<div className="relative w-full flex flex-row justify-between items-center">
|
||||
|
@@ -9,6 +9,7 @@ import MobileHeader from "@/components/MobileHeader";
|
||||
import ResourceIcon from "@/components/ResourceIcon";
|
||||
import { resourceServiceClient } from "@/grpcweb";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
|
||||
import i18n from "@/i18n";
|
||||
import { useMemoStore } from "@/store/v1";
|
||||
import { Resource } from "@/types/proto/api/v1/resource_service";
|
||||
@@ -34,6 +35,7 @@ interface State {
|
||||
|
||||
const Resources = () => {
|
||||
const t = useTranslate();
|
||||
const { md } = useResponsiveWidth();
|
||||
const loadingState = useLoading();
|
||||
const [state, setState] = useState<State>({
|
||||
searchQuery: "",
|
||||
@@ -64,7 +66,7 @@ const Resources = () => {
|
||||
|
||||
return (
|
||||
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
|
||||
<MobileHeader />
|
||||
{!md && <MobileHeader />}
|
||||
<div className="w-full px-4 sm:px-6">
|
||||
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
|
||||
<div className="relative w-full flex flex-row justify-between items-center">
|
||||
|
@@ -13,6 +13,7 @@ import SectionMenuItem from "@/components/Settings/SectionMenuItem";
|
||||
import StorageSection from "@/components/Settings/StorageSection";
|
||||
import WorkspaceSection from "@/components/Settings/WorkspaceSection";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
|
||||
import { workspaceStore } from "@/store/v2";
|
||||
import { User_Role } from "@/types/proto/api/v1/user_service";
|
||||
import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
|
||||
@@ -38,6 +39,7 @@ const SECTION_ICON_MAP: Record<SettingSection, LucideIcon> = {
|
||||
|
||||
const Setting = observer(() => {
|
||||
const t = useTranslate();
|
||||
const { md } = useResponsiveWidth();
|
||||
const location = useLocation();
|
||||
const user = useCurrentUser();
|
||||
const [state, setState] = useState<State>({
|
||||
@@ -83,7 +85,7 @@ const Setting = observer(() => {
|
||||
|
||||
return (
|
||||
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
|
||||
<MobileHeader />
|
||||
{!md && <MobileHeader />}
|
||||
<div className="w-full px-4 sm:px-6">
|
||||
<div className="w-full shadow flex flex-row justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-gray-600 dark:text-gray-400">
|
||||
<div className="hidden sm:flex flex-col justify-start items-start w-40 h-auto shrink-0 py-2">
|
||||
|
Reference in New Issue
Block a user