New mobile friendly navbar

Mindgamesnl · Jun 13, 2024 · 5a7b539 · 5a7b539
1 parent c7ef179
commit 5a7b539
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 22 deletions.
diff --git a/client/public/en.lang b/client/public/en.lang
@@ -18,6 +18,7 @@ navbar.free=free
 navbar.premium=premium
 navbar.upgradeRequired=Upgrade required
 navbar.isPlaying=Playing music
+navbar.menu=Open menu
 
 home.confirmLoginHeader=Welcome back!
 home.confirmLoginBody=Are you trying to login as <i>%player</i>?<br />If you are not, please close this window.
@@ -146,4 +147,4 @@ settings.interpolation.button=Enable smoothing
 
 network.serverUnhealthy={serverName}'s connection to OpenAudioMc is unstable, client functionality may be limited until the connection is restored.
 
-tooltip.close=Close
+tooltip.close=Close
diff --git a/client/src/client/services/media/MediaManager.jsx b/client/src/client/services/media/MediaManager.jsx
@@ -86,7 +86,6 @@ export const MediaManager = new class IMediaManager {
       const channel = chls[i];
       if (all) {
         channel.fadeChannel(0, time, () => {
-          console.log('callback reached');
           this.mixer.removeChannel(channel);
         });
         matchedAndStopped = channel;

diff --git a/client/src/components/icons/hamburger.jsx b/client/src/components/icons/hamburger.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { msg } from '../../client/OpenAudioAppContainer';
+
+export function HamburgerSvg() {
+  // remix of https://www.svgrepo.com/svg/532195/menu?edit=true
+  // by: SVG Repo
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      data-tooltip-id="hamburger-tooltip"
+      data-tooltip-content={msg('navbar.menu')}
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round" />
+      <g id="SVGRepo_iconCarrier">
+        <path
+          d="M4 6H20M4 12H20M4 18H20"
+          stroke="#FFFFFF"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/client/src/components/tabwindow/TabWindow.jsx b/client/src/components/tabwindow/TabWindow.jsx
@@ -7,6 +7,7 @@ import { setGlobalState } from '../../state/store';
 import { msg } from '../../client/OpenAudioAppContainer';
 import ServerConnectionWarning from '../connectionwarning/ServerConnectionWarning';
 import UserAvatar from '../avatar/UserAvatar';
+import { HamburgerSvg } from '../icons/hamburger';
 
 export const setTab = (tab) => {
   setGlobalState({
@@ -18,6 +19,8 @@ class TabWindow extends Component {
   constructor(props) {
     super(props);
     this.openUpgradeDialog = this.openUpgradeDialog.bind(this);
+    this.state = { mobileMenuOpen: false };
+    this.toggleMobileMenu = this.toggleMobileMenu.bind(this);
   }
 
   openUpgradeDialog() {
@@ -30,6 +33,10 @@ class TabWindow extends Component {
     );
   }
 
+  toggleMobileMenu() {
+    this.setState((prevState) => ({ mobileMenuOpen: !prevState.mobileMenuOpen }));
+  }
+
   render() {
     let pages = React.Children.toArray(this.props.children).map((child) => ({
       name: child.props.name,
@@ -63,44 +70,109 @@ class TabWindow extends Component {
         </main>
 
         {!hiddenNavbar && (
-          <nav className="navbar-bg shadow-lg flex items-center p-2">
-            <div className="basis-1/3 flex items-center ">
-              <img src={this.props.settings.logoImage} alt="Logo" className="pl-2 h-8" />
-              <span className="ml-2 font-semibold text-xl text-gray-300">
-                {msg('serverName')}
-              </span>
-            </div>
-
-            <div className="basis-1/3">
-              <div className="flex flex-row gap-1 p-1 mx-auto rounded-lg navbar-bg-button w-min" role="group">
+          <>
+            {/* Mobile Navbar */}
+            <nav className="navbar-bg shadow-lg flex items-center p-2 md:hidden">
+              <div className="flex justify-between items-center w-full">
+                <div className="flex items-center">
+                  <img src={this.props.settings.logoImage} alt="Logo" className="pl-2 h-8" />
+                  <span className="ml-2 font-semibold text-xl text-gray-300">
+                    {msg('serverName')}
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  className="text-white"
+                  onClick={this.toggleMobileMenu}
+                >
+                  <HamburgerSvg />
+                  {this.state.mobileMenuOpen ? 'Close' : 'Menu'}
+                </button>
+              </div>
+            </nav>
+
+            <div
+              className={`fixed inset-0 bg-gray-800 bg-opacity-75 transform ${
+                this.state.mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
+              } transition-transform duration-300 ease-in-out z-50 md:hidden`}
+            >
+              <nav className="flex flex-col p-4 space-y-4">
                 {pages.map((page, index) => (
                   <button
                     key={page.name}
                     type="button"
-                    className={`px-5 whitespace-nowrap py-1.5 text-xs flex flex-col items-center justify-center font-medium transition-colors duration-150 ${this.props.currentTab === index ? 'navbar-button-active rounded-lg' : 'text-white hover:bg-gray-700'}`}
-                    onClick={() => setTab(index)}
+                    className={`px-5 py-3 text-lg font-medium flex gap-3 transition-colors duration-150 ${
+                      this.props.currentTab === index ? 'bg-gray-700 text-green-300' : 'text-white hover:bg-gray-700'
+                    }`}
+                    onClick={() => {
+                      setTab(index);
+                      this.toggleMobileMenu();
+                    }}
                   >
                     {page.buttonContent ? page.buttonContent : null}
                     {page.name}
                     {page.subtext ? (
                       <p
-                        className={`${this.props.currentTab === index ? 'text-green-700' : 'text-green-200'} text-xs`}
+                        className={`text-sm ${
+                          this.props.currentTab === index ? 'text-green-300' : 'text-green-200'
+                        }`}
                       >
                         {page.subtext}
                       </p>
                     ) : null}
                   </button>
                 ))}
-              </div>
+                <div className="flex items-center justify-center mt-auto">
+                  <p className="text-sm text-gray-300">{playerName}</p>
+                  <UserAvatar />
+                </div>
+              </nav>
             </div>
 
-            <div className="basis-1/3 flex float-right w-1/3 place-content-end align-top ">
-              <div className="flex h-full justify-center align-middle items-center items-end">
-                <p className="text-sm text-gray-300">{playerName}</p>
-                <UserAvatar />
+            {/* Desktop Navbar */}
+            <nav className="hidden-on-mobile md:flex navbar-bg shadow-lg flex items-center p-2">
+              <div className="basis-1/3 flex items-center">
+                <img src={this.props.settings.logoImage} alt="Logo" className="pl-2 h-8" />
+                <span className="ml-2 font-semibold text-xl text-gray-300">
+                  {msg('serverName')}
+                </span>
               </div>
-            </div>
-          </nav>
+
+              <div className="basis-1/3">
+                <div className="flex flex-row gap-1 p-1 mx-auto rounded-lg navbar-bg-button w-min" role="group">
+                  {pages.map((page, index) => (
+                    <button
+                      key={page.name}
+                      type="button"
+                      className={`px-5 whitespace-nowrap py-1.5 text-xs flex flex-col items-center justify-center font-medium transition-colors duration-150 ${
+                        this.props.currentTab === index ? 'navbar-button-active rounded-lg' : 'text-white hover:bg-gray-700'
+                      }`}
+                      onClick={() => setTab(index)}
+                    >
+                      {page.buttonContent ? page.buttonContent : null}
+                      {page.name}
+                      {page.subtext ? (
+                        <p
+                          className={`${
+                            this.props.currentTab === index ? 'text-green-700' : 'text-green-200'
+                          } text-xs`}
+                        >
+                          {page.subtext}
+                        </p>
+                      ) : null}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="basis-1/3 flex float-right w-1/3 place-content-end align-top">
+                <div className="flex h-full justify-center align-middle items-center items-end">
+                  <p className="text-sm text-gray-300">{playerName}</p>
+                  <UserAvatar />
+                </div>
+              </div>
+            </nav>
+          </>
         )}
 
         <div className="fixed bottom-0 right-0 p-2 bg-gray-800 rounded-tl-2xl">