adding VITE_APP_BASE_URL to Navbar

El-hacen21 · May 26, 2024 · 83c806b · 83c806b
1 parent 2f714f1
commit 83c806b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/.env.example b/.env.example
@@ -1,5 +1,5 @@
-VITE_APP_BASE_URL=/
+VITE_APP_BASE_URL=/zama_bounty/
 VITE_LOCAL_IPFS_API_URL=http://localhost:5001
 VITE_LOCAL_IPFS_GATEWAY_URL=http://localhost:8080
-VITE_DEDICATED_IPFS_URL= 
-VITE_PINATA_JWT=
+VITE_DEDICATED_IPFS_URL= "*******"
+VITE_PINATA_JWT= "*******"
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -23,11 +23,12 @@ export const NavBar = () => {
     setActiveLink(value);
   };
 
- 
+
   const [showHowItWorksModal, setShowHowItWorksModal] = useState<boolean>(false);
 
   const toggleHowItWorksModal = () => setShowHowItWorksModal(!showHowItWorksModal);
 
+  const baseUrl = process.env.VITE_APP_BASE_URL || '/';
 
   return (
     <Navbar expand="md" className={scrolled ? "scrolled" : ""}>
@@ -40,10 +41,31 @@ export const NavBar = () => {
         </Navbar.Toggle>
         <Navbar.Collapse id="basic-navbar-nav">
           <Nav className="ms-auto">
-            <Nav.Link as={HashLink} to="/#home" className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('home')}>Home</Nav.Link>
-            <Nav.Link as={HashLink} to="/#mint" className={activeLink === 'mint' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('mint')}>Mint</Nav.Link>
-            <Nav.Link as={HashLink} to="/#gallery" className={activeLink === 'gallery' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('gallery')}>Gallery</Nav.Link>
-
+            <Nav.Link
+              as={HashLink}
+              to={`${baseUrl}#home`}
+              className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'}
+              onClick={() => onUpdateActiveLink('home')}
+            >
+              Home
+            </Nav.Link>
+            <Nav.Link
+              as={HashLink}
+              to={`${baseUrl}#mint`}
+              className={activeLink === 'mint' ? 'active navbar-link' : 'navbar-link'}
+              onClick={() => onUpdateActiveLink('mint')}
+            >
+              Mint
+            </Nav.Link>
+            <Nav.Link
+              as={HashLink}
+              to={`${baseUrl}#gallery`}
+              className={activeLink === 'gallery' ? 'active navbar-link' : 'navbar-link'}
+              onClick={() => onUpdateActiveLink('gallery')}
+            >
+              Gallery
+            </Nav.Link>
+
             <Nav.Link
               as={HashLink}
               to="/#mint"