Fixed navbar responsive and dynamic height of navbar (#146)

* fixed navbar responsive issue * temp fixed iframe height * fixed dynamic height * removed create new button
AOT-Technologies · Feb 16, 2024 · 52aa460 · 52aa460
1 parent 0a7c932
commit 52aa460
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 15 deletions.
diff --git a/forms-flow-integration/src/components/ConnectedApps/index.tsx b/forms-flow-integration/src/components/ConnectedApps/index.tsx
@@ -32,7 +32,7 @@ const ConnectedApps = React.memo((props: any) => {
    return (
       <>
          {connectedApps ? <iframe width="100%"
-            height="500"
+            height="700"
             src={connectedApps}
             title="connected apps" >
          </iframe> : <Alert message="No urls found"/> }

diff --git a/forms-flow-integration/src/components/Library/index.tsx b/forms-flow-integration/src/components/Library/index.tsx
@@ -32,7 +32,7 @@ const Library = React.memo((props: any) => {
 
    return (
       <> {libraryUrl ? <iframe width="100%"
-         height="500"
+         height="700"
          src={libraryUrl}
          title="Library" >
       </iframe> : <Alert message="No urls found"/> }</>

diff --git a/forms-flow-integration/src/components/Recipes/index.tsx b/forms-flow-integration/src/components/Recipes/index.tsx
@@ -34,7 +34,7 @@ const Recipes = React.memo((props: any) => {
 
   return (
     <> {recipesUrl ? <iframe width="100%"
-      height="500"
+      height="700"
       src={recipesUrl}
       title="Recipes" >
     </iframe> : <Alert message="No urls found"/> }</>

diff --git a/forms-flow-integration/src/index.tsx b/forms-flow-integration/src/index.tsx
@@ -118,11 +118,7 @@ const Integration = React.memo(({ props }: any) => {
         <div className="main-container " tabIndex={0}>
           <div className="container mt-5">
             <div className="min-container-height ps-md-3">
-              <div className="d-flex align-items-center justify-content-between">
-                <Head hideLine={true} items={headerList()} page={page} />
-                <button className="btn btn-primary"><i className="fa-solid fa-plus me-2"></i>Create new</button>
-              </div>
-              <hr className="head-rule " data-testid="head-rule" />
+                <Head items={headerList()} page={page} />
               <ToastContainer theme="colored" />
               <Switch>
                 <Route

diff --git a/forms-flow-nav/src/Navbar.jsx b/forms-flow-nav/src/Navbar.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Navbar, Container, Nav, NavDropdown } from "react-bootstrap";
 import { Link, BrowserRouter, useHistory } from "react-router-dom";
 import { getUserRoleName, getUserRolePermission } from "./helper/user";
@@ -97,6 +97,33 @@ const NavBar = React.memo(({ props }) => {
   const tenantKey = tenant?.tenantId;
   const formTenant = form?.tenantKey;
   const baseUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
+  const navbarRef = useRef(null);
+
+   const onResize = React.useCallback(() => {
+    if (navbarRef?.current) {
+      const isMediumScreen = window.matchMedia('(min-width: 992px)').matches;
+      if(isMediumScreen){
+        document.documentElement.style.setProperty('--navbar-height', `${navbarRef.current.offsetHeight}px`);
+      }else{
+        document.documentElement.style.setProperty('--navbar-height', `${52}px`);
+      }
+    }
+  }, [navbarRef?.current]);
+
+  // to set the navbar height
+  useEffect(()=>{
+    onResize()
+  },[navbarRef?.current,navbarRef?.current?.offsetHeight])
+
+
+  useEffect(() => {
+        window.addEventListener("resize", onResize);
+    onResize();
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
 
   /**
    * For anonymous forms the only way to identify the tenant is through the
@@ -179,9 +206,8 @@ const NavBar = React.memo(({ props }) => {
     <link rel="icon" type="image/png" href={MULTITENANCY_ENABLED ? tenantLogo : null} />
   </Helmet>
     <BrowserRouter>
-      <header className="navbar-background shadow">
-        <Container>
-          <Navbar  collapseOnSelect expand="lg" className={`navbar-background p-0 m-0 ${!isAuthenticated ? 'justify-content-between':''}`}>
+           <Navbar  ref={navbarRef} collapseOnSelect fixed="top"  expand="lg" className={`navbar-background py-0 shadow px-3 m-0 ${!isAuthenticated ? 'justify-content-between':''}`}>
+          <Container className="d-flex justify-content-between" >
             <Navbar.Brand href={`${baseUrl}`} className="d-flex col-3 px-0">
               <img
                 className="custom-logo"
@@ -198,6 +224,7 @@ const NavBar = React.memo(({ props }) => {
                 className="d-lg-flex justify-content-between h-100"
               >
                 <Nav 
+
                   id="main-menu-nav"
                   className="align-items-lg-center justify-content-start w-100"
                   data-testid="main-menu-nav"
@@ -422,9 +449,10 @@ const NavBar = React.memo(({ props }) => {
                 </Link>
               )
             )}
+            </Container>
           </Navbar>
-        </Container>
-      </header>
+
+
     </BrowserRouter>
     </>
   );

diff --git a/forms-flow-theme/src/baseStyle.scss b/forms-flow-theme/src/baseStyle.scss
@@ -8,7 +8,8 @@ body {
   }
 
   .main-container{
-    max-height: calc(100vh - 52px);
+    max-height: calc(100vh - var(--navbar-height));
+    margin-top: var(--navbar-height);
     overflow-y: auto;
 
   }

diff --git a/forms-flow-theme/src/global.scss b/forms-flow-theme/src/global.scss
@@ -72,6 +72,7 @@
   --navbar-items-font-weight: 400;
 
   --navbar-background: var(--color-white);
+  --navbar-height: 52px;
   --navbar-items: var(--color-black);
   --navbar-active: var(--color-primary);
   --button-primary-background: var(--color-primary);