Navbar is sticky now. Fixed issue where things were being drawn over …

…the navbar
ugahacks · Dec 1, 2023 · fcb55df · fcb55df
1 parent 809e56f
commit fcb55df
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 43 deletions.
diff --git a/.gitignore b/.gitignore
@@ -118,4 +118,6 @@ dist
 firestore*
 
 # VS Code Configuration
-.vscode
+.vscode
+
+.idea/
diff --git a/projects/mybyte/components/navbar.tsx b/projects/mybyte/components/navbar.tsx
@@ -79,9 +79,9 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
           " overflow-y-auto font-inter"
         }
       >
-        <nav className="bg-white border-gray-200 shadow-md">
+        <nav className="bg-white border-gray-200 shadow-md sticky top-0 z-10">
           <div className="flex flex-wrap items-center justify-between mx-auto py-6">
-            <Link href={!user.uid ? "/" : "/dashboard"}>
+            <Link href={!user.id ? "/" : "/dashboard"}>
               <span className="font-semibold uppercase text-xl tracking-5px px-5 hover:text-red-500 transition">
                 UGAHacks
               </span>
@@ -139,9 +139,9 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
                     })
                   ) : (
                     <>
-                      {userInfo.first_name != null &&
-                      userInfo.first_name != "" ? (
-                        <li>
+                      <li>
+                        {userInfo.first_name != null &&
+                        userInfo.first_name != "" ? (
                           <Link href="/dashboard">
                             <span
                               className={
@@ -153,12 +153,11 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
                               Dashboard
                             </span>
                           </Link>
-                        </li>
-                      ) : null}
-
-                      {userInfo.first_name != null &&
-                      userInfo.first_name != "" ? (
-                        <li>
+                        ) : null}
+                      </li>
+                      <li>
+                        {userInfo.first_name != null &&
+                        userInfo.first_name != "" ? (
                           <Link href="/team">
                             <span
                               className={
@@ -170,17 +169,15 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
                               Team
                             </span>
                           </Link>
-                        </li>
-                      ) : null}
-
-                      {/* TODO: Why are we doing the first_name check */}
-
-                      {userInfo.first_name != null &&
-                      userInfo.first_name != "" &&
-                      user_type !== null &&
-                      user_type !== undefined &&
-                      user_type == "service_writer" ? (
-                        <li>
+                        ) : null}
+                      </li>
+                      <li>
+                        {/* TODO: Why are we doing the first_name check */}
+                        {userInfo.first_name != null &&
+                        userInfo.first_name != "" &&
+                        user_type !== null &&
+                        user_type !== undefined &&
+                        user_type == "service_writer" ? (
                           <Link href="/qrRead">
                             <span
                               className={
@@ -192,13 +189,12 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
                               Scanner
                             </span>
                           </Link>
-                        </li>
-                      ) : null}
-
-                      {/* TODO: why are we checking first_name? */}
-                      {userInfo.first_name != null &&
-                      userInfo.first_name != "" ? (
-                        <li>
+                        ) : null}
+                      </li>
+                      <li>
+                        {/* TODO: why are we checking first_name? */}
+                        {userInfo.first_name != null &&
+                        userInfo.first_name != "" ? (
                           <Link href="/insertDevPost">
                             <span
                               className={
@@ -210,9 +206,8 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
                               Submit Devpost Link
                             </span>
                           </Link>
-                        </li>
-                      ) : null}
-
+                        ) : null}
+                      </li>
                       <li>
                         <a onClick={handleLogout} className={nonSelectedStyles}>
                           Logout
@@ -225,16 +220,8 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
             </div>
           </div>
         </nav>
-        <div
-          className={
-            router.asPath === "/register"
-              ? "fixed"
-              : "font-inter h-[calc(100%-168px)] md:h-[calc(100%-76px)]"
-          }
-        >
-          <div id={router.asPath !== "/register" ? "acdweafadaefd" : ""}>
-            {children}
-          </div>
+        <div className="font-inter h-[calc(100%-168px)] md:h-[calc(100%-76px)]">
+          <div id="acdweafadaefd">{children}</div>
         </div>
       </div>
     </div>