enable bootstrap js

Author: cristim67

client/package.json

@@ -30,6 +30,7 @@
     "react-router-dom": "^6.22.0"
   },
   "devDependencies": {
+    "@types/bootstrap": "^5.2.10",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

client/src/components/navbar.component.tsx

@@ -28,9 +28,7 @@ export const NavbarComponent = () => {
   return (
     <>
       <nav
-        className={`navbar navbar-dark navbar-expand-lg fixed-top shadow-sm ${
-          scrolled ? "scrolled" : ""
-        }`}
+        className={`navbar navbar-dark navbar-expand-lg fixed-top shadow-sm ${scrolled ? "scrolled" : ""}`}
         style={{
           backgroundColor: "#FFAE1F",
           transition: "all 0.5s ease-in-out",
@@ -70,21 +68,18 @@ export const NavbarComponent = () => {
             aria-expanded="false"
             aria-label="Toggle navigation"
           >
-            <span
-              className="navbar-toggler-icon"
-            ></span>
+            <span className="navbar-toggler-icon"></span>
           </button>
 
           <div className="collapse navbar-collapse" id="navbarNav">
             <div className="d-flex ms-auto align-items-center">
-              <a className="btn btn-light me-2" href="/account" style={{border: "1px solid black"}}>
+              <a className="btn btn-light me-2" href="/account" style={{ border: "1px solid black" }}>
                 Cont
               </a>
-              <a className="btn btn-light me-2" href="/myappointments" style={{border: "1px solid black"}}>
+              <a className="btn btn-light me-2" href="/myappointments" style={{ border: "1px solid black" }}>
                 Programări
               </a>
-              <a className="btn btn-light me-2" href="mailto:rezervaricaminleu@gmail.com"
-                 style={{border: "1px solid black"}}>
+              <a className="btn btn-light me-2" href="mailto:rezervaricaminleu@gmail.com" style={{ border: "1px solid black" }}>
                 Contact
               </a>
               <a
@@ -93,7 +88,7 @@ export const NavbarComponent = () => {
                   await AuthService.getInstance().logout();
                   window.location.reload();
                 }}
-                style={{border: "1px solid black"}}
+                style={{ border: "1px solid black" }}
               >
                 Logout
               </a>
@@ -102,7 +97,7 @@ export const NavbarComponent = () => {
         </div>
       </nav>
 
-      <div style={{height: navbarHeight}}></div>
+      <div style={{ height: navbarHeight }}></div>
     </>
   );
 };

client/src/index.css

@@ -210,4 +210,17 @@ button{
     opacity: 0;
     transform: translateY(-20%);
   }
-}
+}
+
+@media (max-width: 768px) {
+  .navbar-brand img {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .btn {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    font-size: 0.875rem;
+  }
+}

client/src/main.tsx

@@ -8,6 +8,8 @@ import {GoogleOAuthProvider} from "@react-oauth/google";
 import {AuthService} from "@genezio/auth";
 
 import "bootstrap/dist/css/bootstrap.min.css";
+import('bootstrap/dist/js/bootstrap.bundle.min.js');
+
 import Account from "./routes/account.tsx";
 import Admin from "./routes/admin.tsx";
 import MyAppointments from "./routes/myAppointments.tsx";