new topbar and sidebar modifications

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

@@ -1,9 +1,5 @@
 @import "scss/colours.scss";
 
-.mobile-menu-container {
-  padding-bottom: 4rem;
-}
-
 .mobile-menu {
   z-index: 100;
   position: fixed;

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

@@ -14,7 +14,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Button from "components/common/Button/Button";
 import React, { useEffect, useState } from "react";
-import { Link, NavLink, useHistory, useRouteMatch } from "react-router-dom";
+import { NavLink, useHistory } from "react-router-dom";
 import {
   GetQueueStats,
   GetQueueStatsIsOk,
@@ -39,9 +39,9 @@ export default function SideNav(props: SideNavProps) {
   const { t } = useLocalize("SideNav");
   let history = useHistory();
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const fakeYouFrontendEnv =  FakeYouFrontendEnvironment.getInstance();
+  const fakeYouFrontendEnv = FakeYouFrontendEnvironment.getInstance();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const isDevelopmentEnv = fakeYouFrontendEnv.isDevelopment()
+  const isDevelopmentEnv = fakeYouFrontendEnv.isDevelopment();
   const handleNavLinkClick = () => {
     const wrapper = document.getElementById("wrapper");
 
@@ -73,11 +73,6 @@ export default function SideNav(props: SideNavProps) {
     };
   }, []);
 
-  const matchHome = useRouteMatch({
-    path: "/",
-    exact: true,
-  });
-
   useEffect(() => {
     // Update window width on resize
     const handleResize = () => {
@@ -92,19 +87,17 @@ export default function SideNav(props: SideNavProps) {
     };
   }, []);
 
-  const shouldShowSidebar = windowWidth >= 992 && matchHome;
+  const shouldShowSidebar = windowWidth >= 992;
 
   useEffect(() => {
-    const wrapper = document.getElementById("wrapper");
+    const contentWrapper = document.getElementById("page-content-wrapper");
 
     if (windowWidth >= 992) {
-      if (matchHome) {
-        wrapper?.classList.add("no-padding");
-      } else {
-        wrapper?.classList.remove("no-padding");
-      }
+      contentWrapper?.classList.remove("no-padding");
+    } else {
+      contentWrapper?.classList.add("no-padding");
     }
-  }, [matchHome, windowWidth]);
+  }, [windowWidth]);
 
   const [queueStats, setQueueStats] = useState<GetQueueStatsSuccessResponse>({
     success: true,
@@ -228,29 +221,16 @@ export default function SideNav(props: SideNavProps) {
   // NB(bt,2023-11-28): These are representative of tacotron2 jobs handled by two queueing systems:
   // The legacy queue (tts-inference-job) and the modern queue (inference-job). We'll add both totals
   // while we migrate off of the legacy system, then eventually kill the legacy statistic.
-  const ttsQueuedCount = queueStats.legacy_tts.pending_job_count + queueStats.inference.by_queue.pending_tacotron2_jobs;
+  const ttsQueuedCount =
+    queueStats.legacy_tts.pending_job_count +
+    queueStats.inference.by_queue.pending_tacotron2_jobs;
 
   return (
     <div
       id="sidebar-wrapper"
-      className={`sidebar ${shouldShowSidebar ? "" : "visible"}`}
+      className={`sidebar ${shouldShowSidebar ? "visible" : ""}`}
     >
       <ul className="sidebar-nav">
-        <div className="sidebar-brand">
-          <Link to="/" onClick={handleNavLinkClick}>
-            <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">
-          {userOrLoginButton}
-          {signupOrLogOutButton}
-        </div>
-        <hr className="my-4" />
-
         <li className="sidebar-heading">{t("speechTitle")}</li>
         <li>
           <NavLink
@@ -291,7 +271,7 @@ export default function SideNav(props: SideNavProps) {
             {"Voice Designer"}
           </NavLink>
         </li>
-        <hr className="mb-4 mt-3" />
+        <hr className="mb-3 mt-3" />
         <li className="sidebar-heading">{t("videoTitle")}</li>
         <li>
           <NavLink
@@ -307,7 +287,7 @@ export default function SideNav(props: SideNavProps) {
           </NavLink>
         </li>
 
-        <hr className="mb-4 mt-3" />
+        <hr className="mb-3 mt-3" />
         <li className="sidebar-heading">{t("communityTitle")}</li>
         <li>
           <NavLink
@@ -361,14 +341,11 @@ export default function SideNav(props: SideNavProps) {
             {t("infoPricing")}
           </NavLink>
         </li>
-        <hr className="mb-4 mt-3" />
+        <hr className="mb-3 mt-3" />
         <li className="sidebar-heading">{t("queueTitle")}</li>
         <li className="ps-4 fs-7 mb-5">
           <div>
-            {t("queueTts")}:{" "}
-            <span className="text-red">
-              {ttsQueuedCount}
-            </span>
+            {t("queueTts")}: <span className="text-red">{ttsQueuedCount}</span>
           </div>
           <div>
             {t("queueRvc")}:{" "}

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

@@ -0,0 +1,27 @@
+import { Button } from "components/common";
+import React from "react";
+import { Link } from "react-router-dom";
+
+interface TopNavProps {}
+
+export default function TopNav(props: TopNavProps) {
+  return (
+    <div id="topbar-wrapper" className="position-fixed">
+      <div className="topbar-nav">
+        <Link to="/">
+          <img
+            src="/fakeyou/FakeYou-Logo.png"
+            alt="FakeYou: Cartoon and Celebrity Text to Speech"
+            height="36"
+            className="mb-2"
+          />
+        </Link>
+        <div className="sidebar-buttons d-flex gap-2 mt-4">
+          {/* {userOrLoginButton}
+        {signupOrLogOutButton} */}
+          <Button label="Login" small={true} />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -10,22 +10,21 @@
   transition: all 0.2s ease;
 }
 
-#wrapper.toggled {
-  padding-left: 260px;
-}
+$topbar-height: 70px;
 
 #sidebar-wrapper {
   z-index: 1000;
   position: fixed;
   left: 260px;
   width: 0;
-  height: 100%;
+  height: calc(100% - $topbar-height);
   margin-left: -260px;
   overflow-x: hidden;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease;
+  margin-top: $topbar-height;
 
   &::-webkit-scrollbar {
     width: 0;
@@ -47,43 +46,38 @@
 
 #wrapper.toggled #sidebar-wrapper {
   width: 260px;
+  margin-left: 0;
 }
 
 #page-content-wrapper {
   width: 100%;
   position: relative;
-}
-
-#wrapper.toggled #page-content-wrapper {
-  position: absolute;
-  margin-right: -260px;
+  padding-left: 260px;
+  padding-top: $topbar-height;
 }
 
 /* Sidebar Styles */
 
 .sidebar-nav {
   position: absolute;
-  top: 0;
+  top: 8;
   width: 260px;
   margin: 0;
   padding: 0;
   list-style: none;
-  min-height: 100vh;
+  min-height: 100%;
   background: $panel;
   border-color: rgba(255, 255, 255, 0.0705882353) !important;
   border-right: 1px solid;
+  padding-top: 1.5rem;
 }
 
-// .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;
+  font-size: 16px;
   margin: 0rem 1rem;
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
@@ -137,12 +131,12 @@
   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 */
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 900;
 }
 .toggled #page-content-wrapper {
   position: relative;
-  z-index: 2; /* Ensure content is above the overlay */
+  z-index: 2;
 }
 .toggled #overlay {
   display: block;
@@ -153,16 +147,32 @@
 }
 
 .sidebar {
-  transform: translateX(
-    -100%
-  ); /* move the sidebar out of the screen to the left */
-  transition: transform 0.3s ease-out; /* transition effect */
-  /* other necessary styles for the sidebar */
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-out;
 }
 
 /* Visible state for the sidebar */
 .sidebar.visible {
-  transform: translateX(0); /* sidebar occupies its regular position */
+  transform: translateX(0);
+}
+
+#topbar-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $topbar-height;
+  background: $panel;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.0705882353) !important;
+  z-index: 1000;
+}
+
+.topbar-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 1.5rem;
 }
 
 @media (min-width: 992px) {

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

@@ -84,9 +84,9 @@ import { GenerateSpeechPage } from "./pages/generate_speech/GenerateSpeechPage";
 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 TopNav from "components/layout/TopNav/TopNav";
 import SideNav from "components/layout/SideNav/SideNav";
 import MobileMenu from "components/layout/MobileMenu/MobileMenu";
-import { TopNav } from "./nav/TopNav";
 import TtsModelSearchPage from "./pages/tts/tts_model_search/TtsModelSearchPage";
 import MediaPage from "./pages/media/MediaPage";
 import { VoiceDesignerFormPage } from "./pages/voice_designer/VoiceDesignerFormPage";
@@ -208,13 +208,11 @@ class PageContainer extends React.Component<
   logout = () => {};
 
   public render() {
-    const { location } = this.props;
-
-    const shouldRenderNavs = location.pathname === "/";
-
     return (
       <div id="wrapper" className="no-padding">
         <div id="overlay"></div>
+
+        <TopNav />
         <SideNav
           sessionWrapper={this.props.sessionWrapper}
           logoutHandler={this.logout}
@@ -224,17 +222,6 @@ class PageContainer extends React.Component<
           }
         />
 
-        {shouldRenderNavs && (
-          <TopNav
-            logoutHandler={this.logout}
-            sessionWrapper={this.props.sessionWrapper}
-            querySessionCallback={this.props.querySessionAction}
-            querySessionSubscriptionsCallback={
-              this.props.querySessionSubscriptionsAction
-            }
-          />
-        )}
-
         <div id="page-content-wrapper">
           <MobileMenu sessionWrapper={this.props.sessionWrapper} />
           <Switch>