chroe: add ids for header elements (#1374)

* chroe: add id for header elements

* fix order of id and class
This commit is contained in:
Zeng1998 2023-03-18 20:19:13 +08:00 committed by GitHub
parent 70e32637b0
commit eb835948b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -53,6 +53,7 @@ const Header = () => {
<> <>
<NavLink <NavLink
to="/" to="/"
id="header-home"
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && "bg-white dark:bg-zinc-700 shadow" isActive && "bg-white dark:bg-zinc-700 shadow"
@ -65,6 +66,7 @@ const Header = () => {
</NavLink> </NavLink>
<NavLink <NavLink
to="/review" to="/review"
id="header-review"
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && "bg-white dark:bg-zinc-700 shadow" isActive && "bg-white dark:bg-zinc-700 shadow"
@ -77,6 +79,7 @@ const Header = () => {
</NavLink> </NavLink>
<NavLink <NavLink
to="/resources" to="/resources"
id="header-resources"
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && "bg-white dark:bg-zinc-700 shadow" isActive && "bg-white dark:bg-zinc-700 shadow"
@ -91,6 +94,7 @@ const Header = () => {
)} )}
<NavLink <NavLink
to="/explore" to="/explore"
id="header-explore"
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && "bg-white dark:bg-zinc-700 shadow" isActive && "bg-white dark:bg-zinc-700 shadow"
@ -104,18 +108,21 @@ const Header = () => {
{!isVisitorMode && ( {!isVisitorMode && (
<> <>
<button <button
id="header-ask-ai"
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700" className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
onClick={() => showAskAIDialog()} onClick={() => showAskAIDialog()}
> >
<Icon.Bot className="mr-4 w-6 h-auto opacity-80" /> Ask AI <Icon.Bot className="mr-4 w-6 h-auto opacity-80" /> Ask AI
</button> </button>
<button <button
id="header-archived-memo"
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700" className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
onClick={() => showArchivedMemoDialog()} onClick={() => showArchivedMemoDialog()}
> >
<Icon.Archive className="mr-4 w-6 h-auto opacity-80" /> {t("common.archived")} <Icon.Archive className="mr-4 w-6 h-auto opacity-80" /> {t("common.archived")}
</button> </button>
<button <button
id="header-settings"
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700" className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
onClick={() => showSettingDialog()} onClick={() => showSettingDialog()}
> >
@ -127,6 +134,7 @@ const Header = () => {
<> <>
<NavLink <NavLink
to="/auth" to="/auth"
id="header-auth"
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && "bg-white dark:bg-zinc-700 shadow" isActive && "bg-white dark:bg-zinc-700 shadow"
@ -138,6 +146,7 @@ const Header = () => {
</> </>
</NavLink> </NavLink>
<button <button
id="header-about"
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700" className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
onClick={() => showAboutSiteDialog()} onClick={() => showAboutSiteDialog()}
> >