Add nav and footer ID's

This commit is contained in:
Zetaphor 2023-06-16 14:08:53 -03:00
parent 414c930929
commit 197b736f3e
2 changed files with 21 additions and 14 deletions

View file

@ -16,7 +16,10 @@ export class Footer extends Component<FooterProps, any> {
render() { render() {
return ( return (
<nav className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3"> <nav
id="footer"
className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3"
>
<div className="navbar-collapse"> <div className="navbar-collapse">
<ul className="navbar-nav ml-auto"> <ul className="navbar-nav ml-auto">
{this.props.site?.version !== VERSION && ( {this.props.site?.version !== VERSION && (

View file

@ -86,8 +86,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
const siteView = this.props.siteRes?.site_view; const siteView = this.props.siteRes?.site_view;
const person = UserService.Instance.myUserInfo?.local_user_view.person; const person = UserService.Instance.myUserInfo?.local_user_view.person;
return ( return (
<nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"> <nav
className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
id="navbar"
>
<NavLink <NavLink
id="navTitle"
to="/" to="/"
title={siteView?.site.description ?? siteView?.site.name} title={siteView?.site.description ?? siteView?.site.name}
className="d-flex align-items-center navbar-brand mr-md-3" className="d-flex align-items-center navbar-brand mr-md-3"
@ -100,10 +104,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</NavLink> </NavLink>
{person && ( {person && (
<ul className="navbar-nav d-flex flex-row ml-auto d-md-none"> <ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
<li className="nav-item"> <li className="nav-item nav-item-icon">
<NavLink <NavLink
to="/inbox" to="/inbox"
className="p-1 nav-link border-0" className="p-1 nav-link border-0 nav-messages"
title={i18n.t("unread_messages", { title={i18n.t("unread_messages", {
count: Number(this.state.unreadApplicationCountRes.state), count: Number(this.state.unreadApplicationCountRes.state),
formattedCount: numToSI(this.unreadInboxCount), formattedCount: numToSI(this.unreadInboxCount),
@ -119,7 +123,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</NavLink> </NavLink>
</li> </li>
{this.moderatesSomething && ( {this.moderatesSomething && (
<li className="nav-item"> <li className="nav-item nav-item-icon">
<NavLink <NavLink
to="/reports" to="/reports"
className="p-1 nav-link border-0" className="p-1 nav-link border-0"
@ -139,7 +143,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li> </li>
)} )}
{amAdmin() && ( {amAdmin() && (
<li className="nav-item"> <li className="nav-item nav-item-icon">
<NavLink <NavLink
to="/registration_applications" to="/registration_applications"
className="p-1 nav-link border-0" className="p-1 nav-link border-0"
@ -178,7 +182,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
id="navbarDropdown" id="navbarDropdown"
ref={this.mobileMenuRef} ref={this.mobileMenuRef}
> >
<ul className="mr-auto navbar-nav"> <ul id="navbarLinks" className="mr-auto navbar-nav">
<li className="nav-item"> <li className="nav-item">
<NavLink <NavLink
to="/communities" to="/communities"
@ -228,8 +232,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</a> </a>
</li> </li>
</ul> </ul>
<ul className="navbar-nav"> <ul id="navbarIcons" className="navbar-nav">
<li className="nav-item"> <li className="nav-item nav-item-search">
<NavLink <NavLink
to="/search" to="/search"
className="nav-link" className="nav-link"
@ -240,7 +244,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</NavLink> </NavLink>
</li> </li>
{amAdmin() && ( {amAdmin() && (
<li className="nav-item"> <li className="nav-item nav-item-admin">
<NavLink <NavLink
to="/admin" to="/admin"
className="nav-link" className="nav-link"
@ -253,7 +257,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
)} )}
{person ? ( {person ? (
<> <>
<li className="nav-item"> <li className="nav-item nav-item-messages">
<NavLink <NavLink
className="nav-link" className="nav-link"
to="/inbox" to="/inbox"
@ -272,7 +276,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</NavLink> </NavLink>
</li> </li>
{this.moderatesSomething && ( {this.moderatesSomething && (
<li className="nav-item"> <li className="nav-item nav-item-moderation">
<NavLink <NavLink
className="nav-link" className="nav-link"
to="/reports" to="/reports"
@ -292,7 +296,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li> </li>
)} )}
{amAdmin() && ( {amAdmin() && (
<li className="nav-item"> <li className="nav-item nav-item-applications">
<NavLink <NavLink
to="/registration_applications" to="/registration_applications"
className="nav-link" className="nav-link"
@ -312,7 +316,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li> </li>
)} )}
{person && ( {person && (
<div className="dropdown"> <div id="dropdownUser" className="dropdown">
<button <button
className="btn dropdown-toggle" className="btn dropdown-toggle"
role="button" role="button"