Fix Navbar (#4117)

* Initial commit

* Improve Navbar dropdown + fix mobile

* Add padding to logo

* esf

* Add collapse on select

* Cleanup CSS

* Fix nav menu overflowing

app/assets/stylesheets/application.bootstrap.scss

@@ -19,9 +19,29 @@ body {
   background: whitesmoke;
 }
 
-.header {
+#navbar {
   height: $header-height;
   background: white;
+
+  .navbar-toggler {
+    &:active {
+      outline: none !important;
+      box-shadow: none;
+    }
+    &:focus {
+      outline: none !important;
+      box-shadow: none;
+    }
+  }
+}
+
+#navbar-menu {
+  z-index: 10;
+  top: 100%;
+
+  a {
+    color: $black !important;
+  }
 }
 
 .background-sm-buffer {

app/javascript/components/shared_components/Header.jsx

 import React from 'react';
 import Container from 'react-bootstrap/Container';
-import { Navbar, NavDropdown } from 'react-bootstrap';
+import {
+  Nav, NavDropdown, Navbar, Button,
+} from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { StarIcon, IdentificationIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
 import { useAuth } from '../../contexts/auth/AuthProvider';
 import useDeleteSession from '../../hooks/mutations/sessions/useDeleteSession';
 import Avatar from '../users/user/Avatar';
@@ -36,22 +39,68 @@ export default function Header() {
   }
 
   return (
-    <Navbar className="header">
+    <Navbar collapseOnSelect id="navbar" expand="sm">
       <Container className="ps-0">
-        <Navbar.Brand as={Link} to={homePath}>
+        <Navbar.Brand as={Link} to={homePath} className="ps-2">
           <Logo />
         </Navbar.Brand>
 
-        <div className="d-inline-flex">
+        <Navbar.Toggle aria-controls="responsive-navbar-nav" className="border-0">
           <Avatar avatar={currentUser?.avatar} radius={40} />
-          <NavDropdown title={currentUser?.name} id="nav-user-dropdown">
-            <NavDropdown.Item as={Link} to="/profile">{ t('user.profile.profile') }</NavDropdown.Item>
+        </Navbar.Toggle>
+
+        {/* /!* Visible only on mobile *!/ */}
+        <Navbar.Collapse id="navbar-menu" className="bg-white w-100 position-absolute">
+          <Nav className="d-block d-sm-none text-black px-2">
+            <Nav.Link eventKey={1} as={Link} to="/profile">
+              <IdentificationIcon className="hi-s me-3" />
+              {t('user.profile.profile')}
+            </Nav.Link>
+            <Nav.Link eventKey={2} href="https://docs.bigbluebutton.org/greenlight/gl-overview.html">
+              <QuestionMarkCircleIcon className="hi-s me-3" />
+              {t('help_center')}
+            </Nav.Link>
             {
               adminAccess()
-              && <NavDropdown.Item as={Link} to="/admin">{ t('admin.admin_panel') }</NavDropdown.Item>
+              && (
+                <Nav.Link eventKey={3} as={Link} to="/admin">
+                  <StarIcon className="hi-s me-3 mb-1" />
+                  { t('admin.admin_panel') }
+                </Nav.Link>
+              )
             }
             <NavDropdown.Divider />
-            <NavDropdown.Item onClick={deleteSession.mutate}>{ t('authentication.sign_out') }</NavDropdown.Item>
+            <Button onClick={deleteSession.mutate} variant="brand" className="btn btn-sm mt-2 mb-3 py-2 w-100">{t('authentication.sign_out')}</Button>
+          </Nav>
+        </Navbar.Collapse>
+
+        {/* Not visible on mobile */}
+        <div className="justify-content-end d-none d-sm-block">
+          <div className="d-inline-block">
+            <Avatar avatar={currentUser?.avatar} radius={40} />
+          </div>
+          <NavDropdown title={currentUser?.name} id="nav-user-dropdown" className="d-inline-block" align="end">
+            <NavDropdown.Item as={Link} to="/profile">
+              <IdentificationIcon className="hi-s me-3" />
+              { t('user.profile.profile') }
+            </NavDropdown.Item>
+            <NavDropdown.Item href="https://docs.bigbluebutton.org/greenlight/gl-overview.html">
+              <QuestionMarkCircleIcon className="hi-s me-3" />
+              {t('help_center')}
+            </NavDropdown.Item>
+            {
+              adminAccess()
+              && (
+                <NavDropdown.Item as={Link} to="/admin">
+                  <StarIcon className="hi-s me-3 mb-1" />
+                  { t('admin.admin_panel') }
+                </NavDropdown.Item>
+              )
+            }
+            <NavDropdown.Divider />
+            <div className="px-2">
+              <Button onClick={deleteSession.mutate} variant="brand" className="btn btn-sm w-100 my-2">{t('authentication.sign_out')}</Button>
+            </div>
           </NavDropdown>
         </div>
       </Container>

public/locales/en.json

 {
   "start": "Start",
   "search": "Search",
+  "home": "Home",
   "previous": "Previous",
   "back": "Back",
   "next": "Next",
@@ -18,7 +19,7 @@
   "copy": "Copy",
   "or": "Or",
   "online": "Online",
-  "need_help": "Need help?",
+  "help_center": "Help Center",
   "are_you_sure": "Are you sure?",
   "return_home": "Return Home",
   "created_at": "Created at",