LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2025-01-26 20:06:30 +00:00
Code Issues Projects Releases Wiki Activity

Change from using Link to NavLink. resolve #269

Browse source
This commit is contained in:
Hermanto Lim 2021-04-24 02:13:21 +07:00
parent 1bd2473cdc
commit 9e77148cb1
2 changed files with 28 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/shared/components/footer.tsx
View file

@ -1,5 +1,5 @@
import { Component } from "inferno"; import { Component } from "inferno";
import { Link } from "inferno-router"; import { NavLink } from "inferno-router";
import { i18n } from "../i18next"; import { i18n } from "../i18next";
import { repoUrl, joinLemmyUrl, docsUrl } from "../utils"; import { repoUrl, joinLemmyUrl, docsUrl } from "../utils";
import { GetSiteResponse } from "lemmy-js-client"; import { GetSiteResponse } from "lemmy-js-client";
@ -22,15 +22,15 @@ export class Footer extends Component<FooterProps, any> {
<span class="navbar-text">{this.props.site.version}</span> <span class="navbar-text">{this.props.site.version}</span>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<Link className="nav-link" to="/modlog"> <NavLink className="nav-link" to="/modlog">
{i18n.t("modlog")} {i18n.t("modlog")}
</Link> </NavLink>
</li> </li>
{this.props.site.federated_instances && ( {this.props.site.federated_instances && (
<li class="nav-item"> <li class="nav-item">
<Link className="nav-link" to="/instances"> <NavLink className="nav-link" to="/instances">
{i18n.t("instances")} {i18n.t("instances")}
</Link> </NavLink>
</li> </li>
)} )}
<li class="nav-item"> <li class="nav-item">

42
src/shared/components/navbar.tsx
View file

@ -1,5 +1,5 @@
import { Component, linkEvent, createRef, RefObject } from "inferno"; import { Component, linkEvent, createRef, RefObject } from "inferno";
import { Link } from "inferno-router"; import { NavLink } from "inferno-router";
import { Subscription } from "rxjs"; import { Subscription } from "rxjs";
import { WebSocketService, UserService } from "../services"; import { WebSocketService, UserService } from "../services";
import { import {
@ -172,7 +172,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
this.unreadCountSub.unsubscribe(); this.unreadCountSub.unsubscribe();
} }
// TODO class active corresponding to current page
navbar() { navbar() {
let localUserView = let localUserView =
UserService.Instance.localUserView || this.props.site_res.my_user; UserService.Instance.localUserView || this.props.site_res.my_user;
@ -180,10 +179,11 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3"> <nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
<div class="container"> <div class="container">
{this.props.site_res.site_view && ( {this.props.site_res.site_view && (
<Link <NavLink
title={this.props.site_res.version} title={this.props.site_res.version}
className="d-flex align-items-center navbar-brand mr-md-3" className="d-flex align-items-center navbar-brand mr-md-3"
to="/" to="/"
exact={true}
> >
{this.props.site_res.site_view.site.icon && showAvatars() && ( {this.props.site_res.site_view.site.icon && showAvatars() && (
<PictrsImage <PictrsImage
@ -192,10 +192,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
/> />
)} )}
{this.props.site_res.site_view.site.name} {this.props.site_res.site_view.site.name}
</Link> </NavLink>
)} )}
{this.state.isLoggedIn && ( {this.state.isLoggedIn && (
<Link <NavLink
className="ml-auto p-1 navbar-toggler nav-link border-0" className="ml-auto p-1 navbar-toggler nav-link border-0"
to="/inbox" to="/inbox"
title={i18n.t("inbox")} title={i18n.t("inbox")}
@ -211,7 +211,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
{this.state.unreadCount} {this.state.unreadCount}
</span> </span>
)} )}
</Link> </NavLink>
)} )}
<button <button
class="navbar-toggler border-0 p-1" class="navbar-toggler border-0 p-1"
@ -227,16 +227,16 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
> >
<ul class="navbar-nav my-2 mr-auto"> <ul class="navbar-nav my-2 mr-auto">
<li class="nav-item"> <li class="nav-item">
<Link <NavLink
className="nav-link" className="nav-link"
to="/communities" to="/communities"
title={i18n.t("communities")} title={i18n.t("communities")}
> >
{i18n.t("communities")} {i18n.t("communities")}
</Link> </NavLink>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<Link <NavLink
className="nav-link" className="nav-link"
to={{ to={{
pathname: "/create_post", pathname: "/create_post",
@ -245,16 +245,16 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
title={i18n.t("create_post")} title={i18n.t("create_post")}
> >
{i18n.t("create_post")} {i18n.t("create_post")}
</Link> </NavLink>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<Link <NavLink
className="nav-link" className="nav-link"
to="/create_community" to="/create_community"
title={i18n.t("create_community")} title={i18n.t("create_community")}
> >
{i18n.t("create_community")} {i18n.t("create_community")}
</Link> </NavLink>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a <a
@ -269,13 +269,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<ul class="navbar-nav my-2"> <ul class="navbar-nav my-2">
{this.canAdmin && ( {this.canAdmin && (
<li className="nav-item"> <li className="nav-item">
<Link <NavLink
className="nav-link" className="nav-link"
to={`/admin`} to={`/admin`}
title={i18n.t("admin_settings")} title={i18n.t("admin_settings")}
> >
<Icon icon="settings" /> <Icon icon="settings" />
</Link> </NavLink>
</li> </li>
)} )}
</ul> </ul>
@ -297,7 +297,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
type="text" type="text"
placeholder={i18n.t("search")} placeholder={i18n.t("search")}
onBlur={linkEvent(this, this.handleSearchBlur)} onBlur={linkEvent(this, this.handleSearchBlur)}
></input> />
<label class="sr-only" htmlFor="search-input"> <label class="sr-only" htmlFor="search-input">
{i18n.t("search")} {i18n.t("search")}
</label> </label>
@ -316,7 +316,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<> <>
<ul class="navbar-nav my-2"> <ul class="navbar-nav my-2">
<li className="nav-item"> <li className="nav-item">
<Link <NavLink
className="nav-link" className="nav-link"
to="/inbox" to="/inbox"
title={i18n.t("inbox")} title={i18n.t("inbox")}
@ -332,12 +332,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
{this.state.unreadCount} {this.state.unreadCount}
</span> </span>
)} )}
</Link> </NavLink>
</li> </li>
</ul> </ul>
<ul class="navbar-nav"> <ul class="navbar-nav">
<li className="nav-item"> <li className="nav-item">
<Link <NavLink
className="nav-link" className="nav-link"
to={`/u/${localUserView.person.name}`} to={`/u/${localUserView.person.name}`}
title={i18n.t("settings")} title={i18n.t("settings")}
@ -350,20 +350,20 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
? localUserView.person.display_name ? localUserView.person.display_name
: localUserView.person.name} : localUserView.person.name}
</span> </span>
</Link> </NavLink>
</li> </li>
</ul> </ul>
</> </>
) : ( ) : (
<ul class="navbar-nav my-2"> <ul class="navbar-nav my-2">
<li className="ml-2 nav-item"> <li className="ml-2 nav-item">
<Link <NavLink
className="btn btn-success" className="btn btn-success"
to="/login" to="/login"
title={i18n.t("login_sign_up")} title={i18n.t("login_sign_up")}
> >
{i18n.t("login_sign_up")} {i18n.t("login_sign_up")}
</Link> </NavLink>
</li> </li>
</ul> </ul>
)} )}