LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2025-01-10 20:15:50 +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 { Link } from "inferno-router";
import { NavLink } from "inferno-router";
import { i18n } from "../i18next";
import { repoUrl, joinLemmyUrl, docsUrl } from "../utils";
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>
</li>
<li className="nav-item">
<Link className="nav-link" to="/modlog">
<NavLink className="nav-link" to="/modlog">
{i18n.t("modlog")}
</Link>
</NavLink>
</li>
{this.props.site.federated_instances && (
<li class="nav-item">
<Link className="nav-link" to="/instances">
<NavLink className="nav-link" to="/instances">
{i18n.t("instances")}
</Link>
</NavLink>
</li>
)}
<li class="nav-item">

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

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