From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 18:41:20 +0000 (-0400)
Subject: fix: Make navbar container full screen width #1536
X-Git-Url: http://these/git/%7B%60%24%7BghostArchiveUrl%7D/static/%7Bpost.ap_id%7D?a=commitdiff_plain;h=4800a408fde13dbbb8c55e1e4a1fea567d0426b1;p=lemmy-ui.git

fix: Make navbar container full screen width #1536
---

diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index 11cfb6c..5c01718 100644
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -79,256 +79,246 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     const siteView = this.props.siteRes?.site_view;
     const person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
-      <nav
-        className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
-        id="navbar"
-      >
-        <NavLink
-          id="navTitle"
-          to="/"
-          title={siteView?.site.description ?? siteView?.site.name}
-          className="d-flex align-items-center navbar-brand me-md-3"
-          onMouseUp={linkEvent(this, handleCollapseClick)}
+      <div className="shadow-sm">
+        <nav
+          className="navbar navbar-expand-md navbar-light p-0 px-3 container-lg"
+          id="navbar"
         >
-          {siteView?.site.icon && showAvatars() && (
-            <PictrsImage src={siteView.site.icon} icon />
-          )}
-          {siteView?.site.name}
-        </NavLink>
-        {person && (
-          <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
-            <li id="navMessages" className="nav-item nav-item-icon">
-              <NavLink
-                to="/inbox"
-                className="p-1 nav-link border-0 nav-messages"
-                title={I18NextService.i18n.t("unread_messages", {
-                  count: Number(this.state.unreadApplicationCountRes.state),
-                  formattedCount: numToSI(this.unreadInboxCount),
-                })}
-                onMouseUp={linkEvent(this, handleCollapseClick)}
-              >
-                <Icon icon="bell" />
-                {this.unreadInboxCount > 0 && (
-                  <span className="mx-1 badge text-bg-light">
-                    {numToSI(this.unreadInboxCount)}
-                  </span>
-                )}
-              </NavLink>
-            </li>
-            {this.moderatesSomething && (
-              <li className="nav-item nav-item-icon">
+          <NavLink
+            id="navTitle"
+            to="/"
+            title={siteView?.site.description ?? siteView?.site.name}
+            className="d-flex align-items-center navbar-brand me-md-3"
+            onMouseUp={linkEvent(this, handleCollapseClick)}
+          >
+            {siteView?.site.icon && showAvatars() && (
+              <PictrsImage src={siteView.site.icon} icon />
+            )}
+            {siteView?.site.name}
+          </NavLink>
+          {person && (
+            <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
+              <li id="navMessages" className="nav-item nav-item-icon">
                 <NavLink
-                  to="/reports"
-                  className="p-1 nav-link border-0"
-                  title={I18NextService.i18n.t("unread_reports", {
-                    count: Number(this.unreadReportCount),
-                    formattedCount: numToSI(this.unreadReportCount),
+                  to="/inbox"
+                  className="p-1 nav-link border-0 nav-messages"
+                  title={I18NextService.i18n.t("unread_messages", {
+                    count: Number(this.state.unreadApplicationCountRes.state),
+                    formattedCount: numToSI(this.unreadInboxCount),
                   })}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
-                  <Icon icon="shield" />
-                  {this.unreadReportCount > 0 && (
+                  <Icon icon="bell" />
+                  {this.unreadInboxCount > 0 && (
                     <span className="mx-1 badge text-bg-light">
-                      {numToSI(this.unreadReportCount)}
+                      {numToSI(this.unreadInboxCount)}
                     </span>
                   )}
                 </NavLink>
               </li>
-            )}
-            {amAdmin() && (
-              <li className="nav-item nav-item-icon">
+              {this.moderatesSomething && (
+                <li className="nav-item nav-item-icon">
+                  <NavLink
+                    to="/reports"
+                    className="p-1 nav-link border-0"
+                    title={I18NextService.i18n.t("unread_reports", {
+                      count: Number(this.unreadReportCount),
+                      formattedCount: numToSI(this.unreadReportCount),
+                    })}
+                    onMouseUp={linkEvent(this, handleCollapseClick)}
+                  >
+                    <Icon icon="shield" />
+                    {this.unreadReportCount > 0 && (
+                      <span className="mx-1 badge text-bg-light">
+                        {numToSI(this.unreadReportCount)}
+                      </span>
+                    )}
+                  </NavLink>
+                </li>
+              )}
+              {amAdmin() && (
+                <li className="nav-item nav-item-icon">
+                  <NavLink
+                    to="/registration_applications"
+                    className="p-1 nav-link border-0"
+                    title={I18NextService.i18n.t(
+                      "unread_registration_applications",
+                      {
+                        count: Number(this.unreadApplicationCount),
+                        formattedCount: numToSI(this.unreadApplicationCount),
+                      }
+                    )}
+                    onMouseUp={linkEvent(this, handleCollapseClick)}
+                  >
+                    <Icon icon="clipboard" />
+                    {this.unreadApplicationCount > 0 && (
+                      <span className="mx-1 badge text-bg-light">
+                        {numToSI(this.unreadApplicationCount)}
+                      </span>
+                    )}
+                  </NavLink>
+                </li>
+              )}
+            </ul>
+          )}
+          <button
+            className="navbar-toggler border-0 p-1"
+            type="button"
+            aria-label="menu"
+            data-tippy-content={I18NextService.i18n.t("expand_here")}
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarDropdown"
+            aria-controls="navbarDropdown"
+            aria-expanded="false"
+            ref={this.collapseButtonRef}
+          >
+            <Icon icon="menu" />
+          </button>
+          <div
+            className="collapse navbar-collapse my-2"
+            id="navbarDropdown"
+            ref={this.mobileMenuRef}
+          >
+            <ul id="navbarLinks" className="me-auto navbar-nav">
+              <li className="nav-item">
                 <NavLink
-                  to="/registration_applications"
-                  className="p-1 nav-link border-0"
-                  title={I18NextService.i18n.t(
-                    "unread_registration_applications",
-                    {
-                      count: Number(this.unreadApplicationCount),
-                      formattedCount: numToSI(this.unreadApplicationCount),
-                    }
-                  )}
+                  to="/communities"
+                  className="nav-link"
+                  title={I18NextService.i18n.t("communities")}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
-                  <Icon icon="clipboard" />
-                  {this.unreadApplicationCount > 0 && (
-                    <span className="mx-1 badge text-bg-light">
-                      {numToSI(this.unreadApplicationCount)}
-                    </span>
-                  )}
+                  {I18NextService.i18n.t("communities")}
                 </NavLink>
               </li>
-            )}
-          </ul>
-        )}
-        <button
-          className="navbar-toggler border-0 p-1"
-          type="button"
-          aria-label="menu"
-          data-tippy-content={I18NextService.i18n.t("expand_here")}
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarDropdown"
-          aria-controls="navbarDropdown"
-          aria-expanded="false"
-          ref={this.collapseButtonRef}
-        >
-          <Icon icon="menu" />
-        </button>
-        <div
-          className="collapse navbar-collapse my-2"
-          id="navbarDropdown"
-          ref={this.mobileMenuRef}
-        >
-          <ul id="navbarLinks" className="me-auto navbar-nav">
-            <li className="nav-item">
-              <NavLink
-                to="/communities"
-                className="nav-link"
-                title={I18NextService.i18n.t("communities")}
-                onMouseUp={linkEvent(this, handleCollapseClick)}
-              >
-                {I18NextService.i18n.t("communities")}
-              </NavLink>
-            </li>
-            <li className="nav-item">
-              {/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
-              <NavLink
-                to={{
-                  pathname: "/create_post",
-                  search: "",
-                  hash: "",
-                  key: "",
-                  state: { prevPath: this.currentLocation },
-                }}
-                className="nav-link"
-                title={I18NextService.i18n.t("create_post")}
-                onMouseUp={linkEvent(this, handleCollapseClick)}
-              >
-                {I18NextService.i18n.t("create_post")}
-              </NavLink>
-            </li>
-            {this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
               <li className="nav-item">
+                {/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
                 <NavLink
-                  to="/create_community"
+                  to={{
+                    pathname: "/create_post",
+                    search: "",
+                    hash: "",
+                    key: "",
+                    state: { prevPath: this.currentLocation },
+                  }}
                   className="nav-link"
-                  title={I18NextService.i18n.t("create_community")}
+                  title={I18NextService.i18n.t("create_post")}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
-                  {I18NextService.i18n.t("create_community")}
+                  {I18NextService.i18n.t("create_post")}
                 </NavLink>
               </li>
-            )}
-            <li className="nav-item">
-              <a
-                className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                title={I18NextService.i18n.t("support_lemmy")}
-                href={donateLemmyUrl}
-              >
-                <Icon icon="heart" classes="small" />
-                <span className="d-inline ms-1 d-md-none ms-md-0">
-                  {I18NextService.i18n.t("support_lemmy")}
-                </span>
-              </a>
-            </li>
-          </ul>
-          <ul id="navbarIcons" className="navbar-nav">
-            <li id="navSearch" className="nav-item">
-              <NavLink
-                to="/search"
-                className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                title={I18NextService.i18n.t("search")}
-                onMouseUp={linkEvent(this, handleCollapseClick)}
-              >
-                <Icon icon="search" />
-                <span className="d-inline ms-1 d-md-none ms-md-0">
-                  {I18NextService.i18n.t("search")}
-                </span>
-              </NavLink>
-            </li>
-            {amAdmin() && (
-              <li id="navAdmin" className="nav-item">
+              {this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
+                <li className="nav-item">
+                  <NavLink
+                    to="/create_community"
+                    className="nav-link"
+                    title={I18NextService.i18n.t("create_community")}
+                    onMouseUp={linkEvent(this, handleCollapseClick)}
+                  >
+                    {I18NextService.i18n.t("create_community")}
+                  </NavLink>
+                </li>
+              )}
+              <li className="nav-item">
+                <a
+                  className="nav-link d-inline-flex align-items-center d-md-inline-block"
+                  title={I18NextService.i18n.t("support_lemmy")}
+                  href={donateLemmyUrl}
+                >
+                  <Icon icon="heart" classes="small" />
+                  <span className="d-inline ms-1 d-md-none ms-md-0">
+                    {I18NextService.i18n.t("support_lemmy")}
+                  </span>
+                </a>
+              </li>
+            </ul>
+            <ul id="navbarIcons" className="navbar-nav">
+              <li id="navSearch" className="nav-item">
                 <NavLink
-                  to="/admin"
+                  to="/search"
                   className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                  title={I18NextService.i18n.t("admin_settings")}
+                  title={I18NextService.i18n.t("search")}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
-                  <Icon icon="settings" />
+                  <Icon icon="search" />
                   <span className="d-inline ms-1 d-md-none ms-md-0">
-                    {I18NextService.i18n.t("admin_settings")}
+                    {I18NextService.i18n.t("search")}
                   </span>
                 </NavLink>
               </li>
-            )}
-            {person ? (
-              <>
-                <li id="navMessages" className="nav-item">
+              {amAdmin() && (
+                <li id="navAdmin" className="nav-item">
                   <NavLink
+                    to="/admin"
                     className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                    to="/inbox"
-                    title={I18NextService.i18n.t("unread_messages", {
-                      count: Number(this.unreadInboxCount),
-                      formattedCount: numToSI(this.unreadInboxCount),
-                    })}
+                    title={I18NextService.i18n.t("admin_settings")}
                     onMouseUp={linkEvent(this, handleCollapseClick)}
                   >
-                    <Icon icon="bell" />
-                    <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
-                      {I18NextService.i18n.t("unread_messages", {
-                        count: Number(this.unreadInboxCount),
-                        formattedCount: numToSI(this.unreadInboxCount),
-                      })}
+                    <Icon icon="settings" />
+                    <span className="d-inline ms-1 d-md-none ms-md-0">
+                      {I18NextService.i18n.t("admin_settings")}
                     </span>
-                    {this.unreadInboxCount > 0 && (
-                      <span className="mx-1 badge text-bg-light">
-                        {numToSI(this.unreadInboxCount)}
-                      </span>
-                    )}
                   </NavLink>
                 </li>
-                {this.moderatesSomething && (
-                  <li id="navModeration" className="nav-item">
+              )}
+              {person ? (
+                <>
+                  <li id="navMessages" className="nav-item">
                     <NavLink
                       className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                      to="/reports"
-                      title={I18NextService.i18n.t("unread_reports", {
-                        count: Number(this.unreadReportCount),
-                        formattedCount: numToSI(this.unreadReportCount),
+                      to="/inbox"
+                      title={I18NextService.i18n.t("unread_messages", {
+                        count: Number(this.unreadInboxCount),
+                        formattedCount: numToSI(this.unreadInboxCount),
                       })}
                       onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
-                      <Icon icon="shield" />
+                      <Icon icon="bell" />
                       <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
-                        {I18NextService.i18n.t("unread_reports", {
-                          count: Number(this.unreadReportCount),
-                          formattedCount: numToSI(this.unreadReportCount),
+                        {I18NextService.i18n.t("unread_messages", {
+                          count: Number(this.unreadInboxCount),
+                          formattedCount: numToSI(this.unreadInboxCount),
                         })}
                       </span>
-                      {this.unreadReportCount > 0 && (
+                      {this.unreadInboxCount > 0 && (
                         <span className="mx-1 badge text-bg-light">
-                          {numToSI(this.unreadReportCount)}
+                          {numToSI(this.unreadInboxCount)}
                         </span>
                       )}
                     </NavLink>
                   </li>
-                )}
-                {amAdmin() && (
-                  <li id="navApplications" className="nav-item">
-                    <NavLink
-                      to="/registration_applications"
-                      className="nav-link d-inline-flex align-items-center d-md-inline-block"
-                      title={I18NextService.i18n.t(
-                        "unread_registration_applications",
-                        {
-                          count: Number(this.unreadApplicationCount),
-                          formattedCount: numToSI(this.unreadApplicationCount),
-                        }
-                      )}
-                      onMouseUp={linkEvent(this, handleCollapseClick)}
-                    >
-                      <Icon icon="clipboard" />
-                      <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
-                        {I18NextService.i18n.t(
+                  {this.moderatesSomething && (
+                    <li id="navModeration" className="nav-item">
+                      <NavLink
+                        className="nav-link d-inline-flex align-items-center d-md-inline-block"
+                        to="/reports"
+                        title={I18NextService.i18n.t("unread_reports", {
+                          count: Number(this.unreadReportCount),
+                          formattedCount: numToSI(this.unreadReportCount),
+                        })}
+                        onMouseUp={linkEvent(this, handleCollapseClick)}
+                      >
+                        <Icon icon="shield" />
+                        <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+                          {I18NextService.i18n.t("unread_reports", {
+                            count: Number(this.unreadReportCount),
+                            formattedCount: numToSI(this.unreadReportCount),
+                          })}
+                        </span>
+                        {this.unreadReportCount > 0 && (
+                          <span className="mx-1 badge text-bg-light">
+                            {numToSI(this.unreadReportCount)}
+                          </span>
+                        )}
+                      </NavLink>
+                    </li>
+                  )}
+                  {amAdmin() && (
+                    <li id="navApplications" className="nav-item">
+                      <NavLink
+                        to="/registration_applications"
+                        className="nav-link d-inline-flex align-items-center d-md-inline-block"
+                        title={I18NextService.i18n.t(
                           "unread_registration_applications",
                           {
                             count: Number(this.unreadApplicationCount),
@@ -337,97 +327,111 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                             ),
                           }
                         )}
-                      </span>
-                      {this.unreadApplicationCount > 0 && (
-                        <span className="mx-1 badge text-bg-light">
-                          {numToSI(this.unreadApplicationCount)}
+                        onMouseUp={linkEvent(this, handleCollapseClick)}
+                      >
+                        <Icon icon="clipboard" />
+                        <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+                          {I18NextService.i18n.t(
+                            "unread_registration_applications",
+                            {
+                              count: Number(this.unreadApplicationCount),
+                              formattedCount: numToSI(
+                                this.unreadApplicationCount
+                              ),
+                            }
+                          )}
                         </span>
-                      )}
+                        {this.unreadApplicationCount > 0 && (
+                          <span className="mx-1 badge text-bg-light">
+                            {numToSI(this.unreadApplicationCount)}
+                          </span>
+                        )}
+                      </NavLink>
+                    </li>
+                  )}
+                  {person && (
+                    <li id="dropdownUser" className="dropdown">
+                      <button
+                        type="button"
+                        className="btn dropdown-toggle"
+                        aria-expanded="false"
+                        data-bs-toggle="dropdown"
+                      >
+                        {showAvatars() && person.avatar && (
+                          <PictrsImage src={person.avatar} icon />
+                        )}
+                        {person.display_name ?? person.name}
+                      </button>
+                      <ul
+                        className="dropdown-menu"
+                        style={{ "min-width": "fit-content" }}
+                      >
+                        <li>
+                          <NavLink
+                            to={`/u/${person.name}`}
+                            className="dropdown-item px-2"
+                            title={I18NextService.i18n.t("profile")}
+                            onMouseUp={linkEvent(this, handleCollapseClick)}
+                          >
+                            <Icon icon="user" classes="me-1" />
+                            {I18NextService.i18n.t("profile")}
+                          </NavLink>
+                        </li>
+                        <li>
+                          <NavLink
+                            to="/settings"
+                            className="dropdown-item px-2"
+                            title={I18NextService.i18n.t("settings")}
+                            onMouseUp={linkEvent(this, handleCollapseClick)}
+                          >
+                            <Icon icon="settings" classes="me-1" />
+                            {I18NextService.i18n.t("settings")}
+                          </NavLink>
+                        </li>
+                        <li>
+                          <hr className="dropdown-divider" />
+                        </li>
+                        <li>
+                          <button
+                            className="dropdown-item btn btn-link px-2"
+                            onClick={linkEvent(this, handleLogOut)}
+                          >
+                            <Icon icon="log-out" classes="me-1" />
+                            {I18NextService.i18n.t("logout")}
+                          </button>
+                        </li>
+                      </ul>
+                    </li>
+                  )}
+                </>
+              ) : (
+                <>
+                  <li className="nav-item">
+                    <NavLink
+                      to="/login"
+                      className="nav-link"
+                      title={I18NextService.i18n.t("login")}
+                      onMouseUp={linkEvent(this, handleCollapseClick)}
+                    >
+                      {I18NextService.i18n.t("login")}
                     </NavLink>
                   </li>
-                )}
-                {person && (
-                  <li id="dropdownUser" className="dropdown">
-                    <button
-                      type="button"
-                      className="btn dropdown-toggle"
-                      aria-expanded="false"
-                      data-bs-toggle="dropdown"
-                    >
-                      {showAvatars() && person.avatar && (
-                        <PictrsImage src={person.avatar} icon />
-                      )}
-                      {person.display_name ?? person.name}
-                    </button>
-                    <ul
-                      className="dropdown-menu"
-                      style={{ "min-width": "fit-content" }}
+                  <li className="nav-item">
+                    <NavLink
+                      to="/signup"
+                      className="nav-link"
+                      title={I18NextService.i18n.t("sign_up")}
+                      onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
-                      <li>
-                        <NavLink
-                          to={`/u/${person.name}`}
-                          className="dropdown-item px-2"
-                          title={I18NextService.i18n.t("profile")}
-                          onMouseUp={linkEvent(this, handleCollapseClick)}
-                        >
-                          <Icon icon="user" classes="me-1" />
-                          {I18NextService.i18n.t("profile")}
-                        </NavLink>
-                      </li>
-                      <li>
-                        <NavLink
-                          to="/settings"
-                          className="dropdown-item px-2"
-                          title={I18NextService.i18n.t("settings")}
-                          onMouseUp={linkEvent(this, handleCollapseClick)}
-                        >
-                          <Icon icon="settings" classes="me-1" />
-                          {I18NextService.i18n.t("settings")}
-                        </NavLink>
-                      </li>
-                      <li>
-                        <hr className="dropdown-divider" />
-                      </li>
-                      <li>
-                        <button
-                          className="dropdown-item btn btn-link px-2"
-                          onClick={linkEvent(this, handleLogOut)}
-                        >
-                          <Icon icon="log-out" classes="me-1" />
-                          {I18NextService.i18n.t("logout")}
-                        </button>
-                      </li>
-                    </ul>
+                      {I18NextService.i18n.t("sign_up")}
+                    </NavLink>
                   </li>
-                )}
-              </>
-            ) : (
-              <>
-                <li className="nav-item">
-                  <NavLink
-                    to="/login"
-                    className="nav-link"
-                    title={I18NextService.i18n.t("login")}
-                    onMouseUp={linkEvent(this, handleCollapseClick)}
-                  >
-                    {I18NextService.i18n.t("login")}
-                  </NavLink>
-                </li>
-                <li className="nav-item">
-                  <NavLink
-                    to="/signup"
-                    className="nav-link"
-                    title={I18NextService.i18n.t("sign_up")}
-                    onMouseUp={linkEvent(this, handleCollapseClick)}
-                  >
-                    {I18NextService.i18n.t("sign_up")}
-                  </NavLink>
-                </li>
-              </>
-            )}
-          </ul>
-        </div>
-      </nav>
+                </>
+              )}
+            </ul>
+          </div>
+        </nav>
+      </div>
     );
   }