added sidebar

packages/fakeyou.com/src/AppNew.scss

@@ -1,5 +1,6 @@
 // @import "./scss/normalize.scss";
 // @import-normalize; /* bring in normalize.css styles */
+@import "./scss/nav.scss";
 @import "./scss/colours.scss";
 @import "./scss/site-refresh.scss";
 @import "./scss/CSSParticles.scss";

packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.scss

@@ -0,0 +1,26 @@
+@import "scss/colours.scss";
+
+.mobile-menu-container {
+  padding-bottom: 4.6rem;
+}
+
+.mobile-menu {
+  z-index: 100;
+  position: fixed;
+  min-width: 0px;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  border-radius: 0rem 0rem 0.5rem 0.5rem;
+  background-color: $panel;
+  border-color: #ffffff12 !important;
+  border: 1px solid;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+  transition: all 200ms ease 0s;
+  box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.4);
+  padding: 0.6rem 1rem;
+}

packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import "./MobileMenu.scss";
+import Button from "components/common/Button/Button";
+import { faBars } from "@fortawesome/pro-solid-svg-icons";
+
+export default function MobileMenu() {
+  const handleMenuButtonClick = () => {
+    const wrapper = document.getElementById("wrapper");
+
+    if (window.innerWidth < 1200) {
+      if (wrapper) {
+        wrapper.classList.toggle("toggled");
+      }
+    }
+  };
+
+  return (
+    <div className="mobile-menu-container d-lg-none">
+      <div className="mobile-menu">
+        <div className="row">
+          <div className="d-flex col-4">
+            <Button
+              label="Menu"
+              icon={faBars}
+              secondary
+              small
+              onClick={handleMenuButtonClick}
+            />
+          </div>
+          <div className="d-flex col-4 justify-content-center align-items-center">
+            <img
+              src="/fakeyou/FakeYou-Logo-Mobile.png"
+              alt="FakeYou Mobile Logo"
+              height="36"
+            />
+          </div>
+          <div className="d-flex col-4 justify-content-end">
+            <Button label="Sign Up" small onClick={handleMenuButtonClick} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx

@@ -0,0 +1,142 @@
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import {
+  faBookOpen,
+  faMessageDots,
+  faTrophy,
+  faVideo,
+  faWaveformLines,
+  faStar,
+} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Button from "components/common/Button/Button";
+import React, { useEffect } from "react";
+import { Link, NavLink } from "react-router-dom";
+
+interface SideNavProps {}
+
+export default function SideNav(props: SideNavProps) {
+  const handleNavLinkClick = () => {
+    const wrapper = document.getElementById("wrapper");
+
+    if (window.innerWidth < 1200) {
+      if (wrapper) {
+        wrapper.classList.toggle("toggled");
+      }
+    }
+  };
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      const wrapper = document.getElementById("wrapper");
+      const overlay = document.getElementById("overlay");
+
+      if (
+        (!wrapper?.contains(event.target as Node) ||
+          overlay?.contains(event.target as Node)) &&
+        window.innerWidth < 1200
+      ) {
+        wrapper?.classList.remove("toggled");
+      }
+    };
+
+    document.addEventListener("click", handleOutsideClick);
+
+    return () => {
+      document.removeEventListener("click", handleOutsideClick);
+    };
+  }, []);
+
+  return (
+    <div id="sidebar-wrapper">
+      <ul className="sidebar-nav">
+        <div className="sidebar-brand">
+          <Link to="/">
+            <img
+              src="/fakeyou/FakeYou-Logo.png"
+              alt="FakeYou: Cartoon and Celebrity Text to Speech"
+              height="36"
+            />
+          </Link>
+        </div>
+        <div className="sidebar-buttons d-flex gap-2 mt-4">
+          <Button label="Sign Up" small />
+          <Button label="Login" small secondary />
+        </div>
+        <hr className="my-4" />
+
+        <li className="sidebar-heading">Speech Generation</li>
+        <li>
+          <NavLink
+            to="/tts"
+            activeClassName="active-link"
+            onClick={handleNavLinkClick}
+          >
+            <FontAwesomeIcon
+              icon={faMessageDots}
+              className="sidebar-heading-icon"
+            />
+            Text to Speech
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/voice-conversion"
+            activeClassName="active-link"
+            onClick={handleNavLinkClick}
+          >
+            <FontAwesomeIcon
+              icon={faWaveformLines}
+              className="sidebar-heading-icon"
+            />
+            Voice to Voice
+          </NavLink>
+        </li>
+        <hr className="mb-4 mt-3" />
+        <li className="sidebar-heading">Video Generation</li>
+        <li>
+          <NavLink
+            to="/video"
+            activeClassName="active-link"
+            onClick={handleNavLinkClick}
+          >
+            <FontAwesomeIcon icon={faVideo} className="sidebar-heading-icon" />
+            Video Lipsync
+          </NavLink>
+        </li>
+        <hr className="mb-4 mt-3" />
+        <li className="sidebar-heading">Community</li>
+        <li>
+          <a href="https://fakeyou.com">
+            <FontAwesomeIcon
+              icon={faDiscord}
+              className="sidebar-heading-icon"
+            />
+            Discord
+          </a>
+          <a href="https://fakeyou.com">
+            <FontAwesomeIcon icon={faTrophy} className="sidebar-heading-icon" />
+            Leaderboard
+          </a>
+          <a href="https://fakeyou.com">
+            <FontAwesomeIcon
+              icon={faBookOpen}
+              className="sidebar-heading-icon"
+            />
+            Guide
+          </a>
+        </li>
+        <hr className="mb-3 mt-3" />
+        <li>
+          <NavLink
+            to="/pricing"
+            activeClassName="active-link"
+            onClick={handleNavLinkClick}
+          >
+            <FontAwesomeIcon icon={faStar} className="sidebar-heading-icon" />
+            Pricing
+          </NavLink>
+        </li>
+      </ul>
+    </div>
+  );
+}

packages/fakeyou.com/src/scss/nav.scss

@@ -0,0 +1,159 @@
+@import "./colours.scss";
+
+/* Toggle Styles */
+
+#wrapper {
+  padding-left: 0;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+#wrapper.toggled {
+  padding-left: 260px;
+}
+
+#sidebar-wrapper {
+  z-index: 1000;
+  position: fixed;
+  left: 260px;
+  width: 0;
+  height: 100%;
+  margin-left: -260px;
+  overflow: auto;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+  width: 260px;
+}
+
+#page-content-wrapper {
+  width: 100%;
+  position: relative;
+}
+
+#wrapper.toggled #page-content-wrapper {
+  position: absolute;
+  margin-right: -260px;
+}
+
+/* Sidebar Styles */
+
+.sidebar-nav {
+  position: absolute;
+  top: 0;
+  width: 260px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-height: 100vh;
+  background: $panel;
+  border-color: rgba(255, 255, 255, 0.0705882353) !important;
+  border-right: 1px solid;
+}
+
+// .sidebar-nav li {
+//   text-indent: 2rem;
+//   line-height: 38px;
+// }
+
+.sidebar-nav li a {
+  display: block;
+  text-decoration: none;
+  color: rgba($white, 0.7);
+  font-weight: 500;
+  margin: 0rem 1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.sidebar-nav li a:hover {
+  text-decoration: none;
+  color: $white;
+}
+
+.sidebar-nav li a:active,
+.sidebar-nav li a:focus {
+  text-decoration: none;
+}
+
+.sidebar-brand {
+  font-size: 18px;
+  padding-top: 1.5rem;
+  line-height: 0;
+  margin-left: 1.5rem;
+}
+
+.sidebar-buttons {
+  margin-left: 1.5rem;
+}
+
+.sidebar-heading {
+  margin-left: 1.5rem;
+  margin-bottom: 0.5rem;
+  opacity: 0.5;
+  font-size: 14px;
+}
+
+.sidebar-heading-icon {
+  margin-right: 0.75rem;
+}
+
+.active-link {
+  color: $white !important;
+  background-color: $secondary;
+}
+
+#overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-black background */
+  z-index: 900; /* Appear on top of the content */
+}
+.toggled #page-content-wrapper {
+  position: relative;
+  z-index: 2; /* Ensure content is above the overlay */
+}
+.toggled #overlay {
+  display: block;
+}
+
+@media (min-width: 992px) {
+  #wrapper {
+    padding-left: 260px;
+  }
+
+  #wrapper.toggled {
+    padding-left: 0;
+  }
+
+  #sidebar-wrapper {
+    width: 260px;
+  }
+
+  #wrapper.toggled #sidebar-wrapper {
+    width: 0;
+  }
+
+  #page-content-wrapper {
+    position: relative;
+  }
+
+  #wrapper.toggled #page-content-wrapper {
+    position: relative;
+    margin-right: 0;
+  }
+}

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -82,6 +82,8 @@ import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInf
 import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage";
 import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage";
 import VcModelDeletePage from "./pages/vc/vc_model_delete/VcModelDeletePage";
+import SideNav from "components/layout/SideNav/SideNav";
+import MobileMenu from "components/layout/MobileMenu/MobileMenu";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -188,19 +190,21 @@ class PageContainer extends React.Component<Props, State> {
 
   public render() {
     return (
-      <div id="main" className="mainwrap">
-        <div id="viewable">
-          <TopNav
+      <div id="wrapper">
+        <div id="overlay"></div>
+        <SideNav />
+
+        {/* <TopNav
             logoutHandler={this.logout}
             sessionWrapper={this.props.sessionWrapper}
             querySessionCallback={this.props.querySessionAction}
             querySessionSubscriptionsCallback={
               this.props.querySessionSubscriptionsAction
             }
-          />
-
-          <ScrollToTop />
+          /> */}
 
+        <div id="page-content-wrapper">
+          <MobileMenu />
           <Switch>
             <Route path="/firehose">
               <FirehoseEventListPage
@@ -688,9 +692,9 @@ class PageContainer extends React.Component<Props, State> {
               />
             </Route>
           </Switch>
-
-          <FooterNav sessionWrapper={this.props.sessionWrapper} />
         </div>
+
+        {/* <FooterNav sessionWrapper={this.props.sessionWrapper} /> */}
       </div>
     );
   }