bottom nav?

Author: R-Sandor

frontend/app/globals.scss

@@ -56,7 +56,7 @@ a {
 
 [data-bs-theme="light"] {
   background-color: #8cabae;
-  --tag-list-bg: #8cabae;
+  --tag-list-bg: var(--bs-body-bg);
   --card-bg: #f6faf9;
 }
 

frontend/app/page.tsx

@@ -3,10 +3,11 @@ import UseAuth from "@components/UseAuth";
 import TagList from "@components/Tags/TagList";
 import tagStyles from "@/styles/tag.module.scss";
 import navStyles from "@/styles/navbar.module.scss";
+import sideStyles from "@/styles/sidemenu.module.scss";
 import BookmarkCardsView from "@components/CardView/BookmarkCardsView";
 import { ScreenSizeProvider } from "@/contexts/ScreenSizeContext";
 import NewBookmarkCard from "@components/Bookmark/NewBookmarkCard";
-
+import Image from "next/image";
 export default function App() {
   const userAuth = UseAuth();
 
@@ -23,6 +24,18 @@ export default function App() {
           <div
             className={`col-md-4 col-lg-2 col-xl-1 fixed-top ${tagStyles.sideMenu}`}
           >
+            <div className={`${sideStyles.logo}`}>
+              <div className="">
+                <Image
+                  src="/basic-f-v2-dark-mode-v2-fav.png"
+                  width="38"
+                  height="30"
+                  className="d-inline-block align-top"
+                  alt="FindFirst Logo"
+                />
+                <h4 className="d-inline-block">FindFirst</h4>
+              </div>
+            </div>
             <NewBookmarkCard />
             <TagList />
           </div>

frontend/components/Bookmark/CardBody.tsx

@@ -4,7 +4,6 @@ import Bookmark from "@type/Bookmarks/Bookmark";
 import EditableField from "./EditableField";
 import { ScrapableBookmarkToggle } from "./ScrapableToggle";
 import style from "./bookmarkCard.module.scss";
-import { ScreenSizeProvider } from "@/contexts/ScreenSizeContext";
 
 interface CardBodyProp {
   bookmark: Readonly<Bookmark>;

frontend/components/Bookmark/NewBookmarkCard.tsx

@@ -104,7 +104,7 @@ export default function NewBookmarkCard() {
 
   const handleOnSubmit = async (
     submittedBmk: NewBookmarkForm,
-    actions: any
+    actions: any,
   ) => {
     // Get the last inputted string and all the tags already entered.
     let tags: Tag[] = strTags.map((t) => ({ title: t, id: -1 }));

frontend/components/Bookmark/bookmarkCard.module.scss

@@ -150,10 +150,15 @@
 }
 
 .bookmarkCard {
-  // min-height: 250px;
+  // min-height: 250px
+  margin-top: 0px;
   margin-bottom: 20px;
   background-color: var(--card-bg);
   border: 0px;
+
+  padding: 0px !important;
+  .card-body {
+  }
 }
 
 .newBookmarkCard {

frontend/components/CardView/BookmarkCardsView.tsx

@@ -52,7 +52,7 @@ export default function BookmarkCardsView() {
       {!bookmarks.loading ? (
         <div
           className={`${cardView.content} row`}
-          style={{ marginTop: "60px" }}
+          style={{ marginBottom: "60px" }}
         >
           {filterBookmarks(bookmarks.fetchedBookmarks).map((b) => {
             return (

frontend/components/Navbar/Navbar.tsx

@@ -9,10 +9,22 @@ import Export from "./Export";
 import Image from "next/image";
 import Searchbar from "./Searchbar";
 import navbarView from "styles/navbar.module.scss";
+import { useEffect, useState } from "react";
 
 const GlobalNavbar: React.FC = () => {
   const userAuth = useAuth();
   const user = authService.getUser();
+  let [isMobile, setIsMobile] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    setIsMobile(window.innerWidth <= 767.98);
+
+    const checkWindowWidth = () => {
+      setIsMobile(window.innerWidth <= 767.98);
+    };
+
+    window.addEventListener("resize", checkWindowWidth);
+  }, []);
 
   const router = useRouter();
   function authButton() {
@@ -53,7 +65,7 @@ const GlobalNavbar: React.FC = () => {
   return (
     <Navbar
       expand="md"
-      fixed="top"
+      fixed="bottom"
       style={{
         borderBottom: "1px solid",
         height: "auto",
@@ -62,19 +74,20 @@ const GlobalNavbar: React.FC = () => {
       className="bg-body-tertiary"
     >
       <Container className={navbarView.navContainer}>
-        <Navbar.Brand
-          onClick={() => router.push("/")}
-          className={`cursor-pointer ${navbarView.navBrand}`}
-        >
-          <Image
-            src="/basic-f-v2-dark-mode-v2-fav.png"
-            width="38"
-            height="30"
-            className="d-inline-block align-top"
-            alt="findFirst logo"
-          />
-          FindFirst
-        </Navbar.Brand>
+        {isMobile ? (
+          <Navbar.Brand
+            onClick={() => router.push("/")}
+            className={` ${navbarView.navBrand}`}
+          >
+            <Image
+              src="/basic-f-v2-dark-mode-v2-fav.png"
+              width="38"
+              height="30"
+              className="d-inline-block align-top"
+              alt="FindFirst Logo"
+            />
+          </Navbar.Brand>
+        ) : null}
 
         {/* Search bar stays visible always */}
         {userAuth === AuthStatus.Authorized ? <Searchbar /> : null}

frontend/styles/cardView.module.scss

@@ -5,6 +5,6 @@
 
   @media (max-width: 760px) {
     margin-left: 0px;
-    padding-bottom: 75px;
+    padding-bottom: 85px;
   }
 }

frontend/styles/navbar.module.scss

@@ -85,7 +85,7 @@
 
     .searchBar {
       position: fixed;
-      bottom: 35px;
+      bottom: 105px;
       right: 10%;
       width: 80vw;
       z-index: 1;
@@ -129,5 +129,4 @@
 .gridContainer {
   display: grid;
   grid-template-columns: minmax(250px, 300px) 1fr; /* taglist min 250px, max 300px, rest fills */
-  height: calc(100vh - 60px);
 }

frontend/styles/sidemenu.module.scss

@@ -0,0 +1,3 @@
+.logo {
+  margin-left: 5px;
+}