Skip to content

Commit

Permalink
Merge pull request #118 from zstenger93/frontend
Browse files Browse the repository at this point in the history 
Frontend
  • Loading branch information
@zstenger93
zstenger93 authored Dec 26, 2023
2 parents 440f4b2 + 7721d5e commit a8e5461
Show file tree
Hide file tree
Showing 3 changed files with 198 additions and 62 deletions.
244 changes: 183 additions & 61 deletions frontend/src/components/Sidebar.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { TbLogout } from "react-icons/tb";
import { useTranslation } from "react-i18next";
Expand All @@ -16,69 +16,188 @@ const Sidebar = () => {
setDropdownOpen(false);
};

const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 768);
};

window.addEventListener("resize", handleResize);

return () => {
window.removeEventListener("resize", handleResize);
};
}, []);

const [isMenuOpen, setIsMenuOpen] = useState(false);

const toggleMenu = () => {
setIsMenuOpen(prevState => !prevState);
};


return (
<div
className="fixed top-0 left-0 h-screen w-16 m-0
flex flex-col bg-gray-800 bg-opacity-30 text-white
shadow-lg"
>
<div className="mt-10 space-y-5">
<SidebarIcon icon={<FaHome size="32" />} text={t("Home")} to="/home" />
<SidebarIcon
icon={<SiGooglechat size="32" />}
text={t("Channels & Private Messages")}
to="/chat"
/>
<SidebarIcon
icon={<SiGameandwatch size="32" />}
text={t("Play or Watch Games")}
to="/games"
/>
<SidebarIcon
icon={<FaUser size="32" />}
text={t("Profile")}
to="/profile"
/>
<SidebarIcon
icon={<FaInfoCircle size="32" />}
text={t("About Us")}
to="/about"
/>
<SidebarDropdown
icon={<HiMiniLanguage size="32" />}
text={t("Language")}
options={[
{ value: "en", label: "EN" },
{ value: "fr", label: "FR" },
{ value: "hu", label: "HU" },
{ value: "de", label: "DE" },
{ value: "jp", label: "JP" },
]}
onSelect={changeLanguage}
/>
</div>
<div className="mb-10 mt-auto">
<SidebarIcon icon={<TbLogout size="32" />} text={t("Logout")} to="/" />
</div>
</div>
<>
{isMenuOpen && (
<div
className="fixed top-0 left-0 h-screen w-screen bg-gray-900 bg-opacity-80"
onClick={toggleMenu}
>
<div className="flex flex-col justify-start items-center mt-24">
<SidebarIcon
icon={<FaHome size="32" />}
text={t("Home")}
to="/home"
/>
<SidebarIcon
icon={<SiGooglechat size="32" />}
text={t("Channels & Private Messages")}
to="/chat"
/>
<SidebarIcon
icon={<SiGameandwatch size="32" />}
text={t("Play or Watch Games")}
to="/games"
/>
<SidebarIcon
icon={<FaUser size="32" />}
text={t("Profile")}
to="/profile"
/>
<SidebarIcon
icon={<FaInfoCircle size="32" />}
text={t("About Us")}
to="/about"
/>
<SidebarIcon
icon={<TbLogout size="32" />}
text={t("Logout")}
to="/"
/>
<SidebarDropdown
icon={<HiMiniLanguage size="32" />}
text={t("Language")}
options={[
{ value: "en", label: "EN" },
{ value: "fr", label: "FR" },
{ value: "hu", label: "HU" },
{ value: "de", label: "DE" },
{ value: "jp", label: "JP" },
]}
onSelect={changeLanguage}
/>
</div>
</div>
)}
{isMobile ? (
/* Render hamburger menu for small screens */
<div className="lg:hidden cursor-pointer p-4" onClick={toggleMenu}>
<div
className={`bar h-1 w-8 transition-all duration-300
${isMenuOpen
?
"rotate-45 translate-y-2.5 bg-white"
:
"bg-purple-700"
}`}
style={{ marginBottom: "4px" }}
></div>
<div
className={`bar h-1 w-8 bg-purple-700 transition-all duration-300
${isMenuOpen
?
"opacity-0"
:
""
}`}
></div>
<div
className={`bar h-1 w-8 transition-all duration-300
${isMenuOpen
?
"-rotate-45 -translate-y-2 bg-white"
:
" bg-purple-700"
}`}
style={{ marginTop: "4px" }}
></div>
</div>

) : (
/* Render full sidebar for larger screens */
<div
className="fixed top-0 left-0 h-screen w-16 m-0
flex flex-col bg-gray-800 bg-opacity-30 text-white
shadow-lg transition-all duration-300"
>
<div className="mt-10 space-y-5">
<SidebarIcon
icon={<FaHome size="32" />}
text={t("Home")}
to="/home" />
<SidebarIcon
icon={<SiGooglechat size="32" />}
text={t("Channels & Private Messages")}
to="/chat"
/>
<SidebarIcon
icon={<SiGameandwatch size="32" />}
text={t("Play or Watch Games")}
to="/games"
/>
<SidebarIcon
icon={<FaUser size="32" />}
text={t("Profile")}
to="/profile"
/>
<SidebarIcon
icon={<FaInfoCircle size="32" />}
text={t("About Us")}
to="/about"
/>
<SidebarDropdown
icon={<HiMiniLanguage size="32" />}
text={t("Language")}
options={[
{ value: "en", label: "EN" },
{ value: "fr", label: "FR" },
{ value: "hu", label: "HU" },
{ value: "de", label: "DE" },
{ value: "jp", label: "JP" },
]}
onSelect={changeLanguage}
/>
</div>
<div className="mb-10 mt-auto">
<SidebarIcon
icon={<TbLogout size="32" />}
text={t("Logout")}
to="/" />
</div>
</div>
)}

</>
);
};

const SidebarIcon = ({ icon, text = "tooltip", to, margin }) => {
const SidebarIcon = ({ icon, text = "tooltip", to, margin, alwaysShowTooltip }) => {
return (
<Link
to={to}
className={`relative flex items-center justify-center
h-12 w-12 mt-2 mb-2 mx-auto shadow-lg
bg-purple-900 bg-opacity-50 text-blue-300 hover:bg-blue-300
hover:text-purple-900 rounded-3xl hover:rounded-xl transition-all
duration-300 ease-linear cursor-pointer group ${margin}`}
h-12 w-12 mt-2 mb-2 mx-auto shadow-lg
bg-purple-900 bg-opacity-50 text-blue-300 hover:bg-blue-300
hover:text-purple-900 rounded-3xl hover:rounded-xl transition-all
duration-300 ease-linear cursor-pointer group ${margin}`}
>
{icon}
<span
className="absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md
text-white bg-gray-900 text-xs font-bold transition-all
duration-100 scale-0 origin-left group-hover:scale-100"
className={`absolute w-auto p-2 m-2 min-w-max left-14 rounded-md
text-white bg-gray-900 text-xs font-bold transition-all
duration-100 ${alwaysShowTooltip ? 'scale-100' : 'scale-0'}
origin-left group-hover:scale-100 shadow-md`}
>
{text}
</span>
Expand All @@ -98,14 +217,17 @@ const SidebarDropdown = ({ icon, text, options, onSelect }) => {
};

return (
<div className="relative">
<div className="relative" onClick={(event) => event.stopPropagation()}>
<button
className={`relative flex items-center justify-center
h-12 w-12 mt-2 mb-2 mx-auto shadow-lg
bg-purple-900 bg-opacity-50 text-blue-300 hover:bg-blue-300
hover:text-purple-900 rounded-3xl hover:rounded-xl transition-all
duration-300 ease-linear cursor-pointer group`}
onClick={() => setDropdownOpen(!dropdownOpen)}
onClick={(event) => {
event.stopPropagation();
setDropdownOpen(!dropdownOpen)
}}
>
{icon}
<span
Expand All @@ -120,16 +242,16 @@ const SidebarDropdown = ({ icon, text, options, onSelect }) => {
<div
className="absolute left-0 w-22 py-2 mt-2 bg-gray-900 bg-opacity-80
rounded-xl shadow-xl text-center"
onClick={(event) => event.stopPropagation()}
>
{options.map((option) => (
<button
key={option.value}
className={`w-full py-2 ${
option.value === currentLanguage
? "text-blue-500 font-bold"
: "text-gray-300"
} hover:bg-indigo-500 hover:text-white`}
onClick={() => handleSelect(option.value)}
className={`w-full py-2 ${option.value === currentLanguage
? "text-blue-500 font-bold"
: "text-gray-300"
} hover:bg-indigo-500 hover:text-white`}
onClick={(event) => handleSelect(option.value, event)}
>
{option.label}
</button>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/WelcomeMessage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ function WelcomeMessage() {
const { t } = useTranslation();
return (
<nav className="bg-opacity-0 p-2 text-center">
<span className="text-gray-300 font-extrabold text-4xl">
<span className="text-gray-300 font-extrabold text-sm sm:text-base md:text-2xl lg:text-4xl">
{t("Welcome To")}
<br />
{t("TranscENDence")}
Expand Down
14 changes: 14 additions & 0 deletions frontend/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import './styles/tailwind.css';

/* wish it would be this easy to form my body .. */
body {
margin: 0;
height: 100%;
Expand All @@ -16,3 +17,16 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

/* for the hamburger menu bars */
.bar {
width: 24px;
height: 3px;
margin: 6px 0;
transition: 0.4s;
}

.tooltip.always-show .tooltiptext {
visibility: visible;
opacity: 1;
}

0 comments on commit a8e5461

Please sign in to comment.