-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4a9d6aa
commit 1e94bd9
Showing
5 changed files
with
138 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| /* Header Bar Styles */ | ||
| .header-bar { | ||
| position: absolute; /* Ensures it stays at the top of the page, not fixed on the screen */ | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 5px 10px; | ||
| background-color: #3b3b3b00; | ||
| color: var(--text-color); | ||
| z-index: 1000; /* Ensures it stays above other content */ | ||
| transition: background-color 0.3s ease, color 0.3s ease; | ||
| margin-bottom: 50px; | ||
| } | ||
|
|
||
| .header-link { | ||
| color: #4e4e4e; | ||
| font-size: 20px; | ||
| text-decoration: none; | ||
| font-weight: bold; | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| .header-link:hover { | ||
| color: #757575; | ||
| } | ||
|
|
||
| /* Dropdown menu styles */ | ||
| .dropdown { | ||
| position: relative; | ||
| } | ||
|
|
||
| .dropbtn { | ||
| background-color: #505050ec; | ||
| color: white; | ||
| padding: 8px 16px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| font-size: 16px; | ||
| margin-right: 15px; | ||
| } | ||
|
|
||
| .dropbtn:hover { | ||
| background-color: #333; | ||
| } | ||
|
|
||
| .dropdown-content { | ||
| display: none; | ||
| position: absolute; | ||
| right: 0; | ||
| background-color: #1d1d1d; | ||
| border: 1px solid #535353; | ||
| border-radius: 5px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | ||
| z-index: 1001; | ||
| min-width: 220px; | ||
| max-height: 380px; /* Set a maximum height for the dropdown */ | ||
| overflow-y: auto; /* Enable vertical scrolling */ | ||
| padding: 10px 0; | ||
| } | ||
|
|
||
| .dropdown-content a { | ||
| color: white; | ||
| text-decoration: none; | ||
| padding: 8px 16px; | ||
| display: block; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .dropdown-content a:hover { | ||
| background-color: #535353; | ||
| } | ||
|
|
||
| .dropdown.show .dropdown-content { | ||
| display: block; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| // ADD HEADER | ||
| fetch('https://kay-who-codes.github.io/Kay-App-Assets/Full-Header.html') | ||
| .then(response => { | ||
| if (!response.ok) { | ||
| throw new Error('Failed to load header'); | ||
| } | ||
| return response.text(); | ||
| }) | ||
| .then(data => { | ||
| document.getElementById('header').innerHTML = data; | ||
|
|
||
| // Update the header link dynamically | ||
| const headerLink = document.querySelector('.header-link'); | ||
| if (headerLink) { | ||
| // Option 1: Extract from URL | ||
| const pathSegments = window.location.pathname.split('/').filter(segment => segment); | ||
| const repoName = pathSegments[0] || 'APP_NAME_GOES_HERE'; | ||
| const appName = repoName.replace(/-/g, ' '); | ||
|
|
||
| headerLink.textContent = appName; | ||
| headerLink.href = `https://github.com/kay-who-codes/${repoName}`; | ||
| } | ||
|
|
||
| // Add event listeners after injecting the header | ||
| const dropbtn = document.querySelector('.dropbtn'); | ||
| if (dropbtn) { | ||
| dropbtn.addEventListener('click', toggleDropdown); | ||
| } | ||
|
|
||
| // Close dropdown when clicking outside | ||
| window.addEventListener('click', (event) => { | ||
| const dropdown = document.querySelector('.dropdown'); | ||
| if (dropdown && !dropdown.contains(event.target)) { | ||
| dropdown.classList.remove('show'); | ||
| } | ||
| }); | ||
| }) | ||
| .catch(error => { | ||
| console.error('Error loading header:', error); | ||
| document.getElementById('header').innerHTML = '<p>Header failed to load.</p>'; | ||
| }); | ||
|
|
||
| // Toggle dropdown visibility | ||
| function toggleDropdown() { | ||
| const dropdown = document.querySelector('.dropdown'); | ||
| dropdown.classList.toggle('show'); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters