Skip to content

Commit

Permalink
add +/- icon to collapsible navbar sections. update navbar color
Browse files Browse the repository at this point in the history
  • Loading branch information
@dylansdaniels
dylansdaniels committed Dec 16, 2024
1 parent e695e12 commit d115a9e
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 16 deletions.
10 changes: 7 additions & 3 deletions content/01_under_the_hood/cortical_column_structure.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<a href="/website_redesign/content/preface.html">Preface</a>
<div class="sidebar-list">
<a id="sidebar-header" onclick="toggleSubmenu(event)">
<span class="toggle-icon">+</span>
1. Under the Hood
</a>
<div class="submenu">
Expand All @@ -27,6 +28,7 @@
</div>
<div class="sidebar-list">
<a id="sidebar-header" onclick="toggleSubmenu(event)">
<span class="toggle-icon">+</span>
2 Simulating ERPs
</a>
<div class="submenu">
Expand Down Expand Up @@ -137,13 +139,15 @@
};

function toggleSubmenu(event) {
const submenu = event.target.nextElementSibling; // Get the submenu for the clicked header
const header = event.target.closest('#sidebar-header'); // Get the clicked header
const submenu = header.nextElementSibling; // Get the submenu
const toggleIcon = header.querySelector('.toggle-icon'); // Get the icon

// If the submenu exists, toggle it
if (submenu && submenu.classList.contains('submenu')) {
submenu.classList.toggle('open'); // Toggle the 'open' class to control visibility
toggleIcon.textContent = submenu.classList.contains('open') ? '-' : '+'; // Update icon
}
};
}

// This function will add the full text to the title attribute for all anchor tags
document.querySelectorAll('.sidebar a').forEach(anchor => {
Expand Down
10 changes: 7 additions & 3 deletions content/01_under_the_hood/primary_electric_currents.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<a href="/website_redesign/content/preface.html">Preface</a>
<div class="sidebar-list">
<a id="sidebar-header" onclick="toggleSubmenu(event)">
<span class="toggle-icon">+</span>
1. Under the Hood
</a>
<div class="submenu">
Expand All @@ -27,6 +28,7 @@
</div>
<div class="sidebar-list">
<a id="sidebar-header" onclick="toggleSubmenu(event)">
<span class="toggle-icon">+</span>
2 Simulating ERPs
</a>
<div class="submenu">
Expand Down Expand Up @@ -137,13 +139,15 @@
};

function toggleSubmenu(event) {
const submenu = event.target.nextElementSibling; // Get the submenu for the clicked header
const header = event.target.closest('#sidebar-header'); // Get the clicked header
const submenu = header.nextElementSibling; // Get the submenu
const toggleIcon = header.querySelector('.toggle-icon'); // Get the icon

// If the submenu exists, toggle it
if (submenu && submenu.classList.contains('submenu')) {
submenu.classList.toggle('open'); // Toggle the 'open' class to control visibility
toggleIcon.textContent = submenu.classList.contains('open') ? '-' : '+'; // Update icon
}
};
}

// This function will add the full text to the title attribute for all anchor tags
document.querySelectorAll('.sidebar a').forEach(anchor => {
Expand Down
10 changes: 7 additions & 3 deletions content/02_simulating_erps/overview_of_erps.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<a href="/website_redesign/content/preface.html">Preface</a>
<div class="sidebar-list">
<a id="sidebar-header" onclick="toggleSubmenu(event)">
<span class="toggle-icon">+</span>
1. Under the Hood
</a>
<div class="submenu">
Expand All @@ -27,6 +28,7 @@
</div>
<div class="sidebar-list">
<a id="sidebar-header" onclick="toggleSubmenu(event)">
<span class="toggle-icon">+</span>
2 Simulating ERPs
</a>
<div class="submenu">
Expand Down Expand Up @@ -1142,13 +1144,15 @@ <h2 id="references">
};

function toggleSubmenu(event) {
const submenu = event.target.nextElementSibling; // Get the submenu for the clicked header
const header = event.target.closest('#sidebar-header'); // Get the clicked header
const submenu = header.nextElementSibling; // Get the submenu
const toggleIcon = header.querySelector('.toggle-icon'); // Get the icon

// If the submenu exists, toggle it
if (submenu && submenu.classList.contains('submenu')) {
submenu.classList.toggle('open'); // Toggle the 'open' class to control visibility
toggleIcon.textContent = submenu.classList.contains('open') ? '-' : '+'; // Update icon
}
};
}

// This function will add the full text to the title attribute for all anchor tags
document.querySelectorAll('.sidebar a').forEach(anchor => {
Expand Down
8 changes: 7 additions & 1 deletion content/assets/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ code {
z-index: 1;
top: 0;
left: 0;
background-color: var(--hnn-violet);
background-color: #88548c;
/* overflow-x: hidden; */
overflow: hidden;
transition: 0.3s;
Expand All @@ -137,6 +137,12 @@ code {
color: var(--hnn-yellow);
}

.sidebar .toggle-icon {
float: right;
font-weight: bold;
transition: transform 0.3s;
}

.submenu {
display: none; /* hide submenu by default */
padding-left: 20px; /* indentation for the submenu items */
Expand Down
10 changes: 7 additions & 3 deletions content/preface.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<a href="/website_redesign/content/preface.html">Preface</a>
<div class="sidebar-list">
<a id="sidebar-header" onclick="toggleSubmenu(event)">
<span class="toggle-icon">+</span>
1. Under the Hood
</a>
<div class="submenu">
Expand All @@ -27,6 +28,7 @@
</div>
<div class="sidebar-list">
<a id="sidebar-header" onclick="toggleSubmenu(event)">
<span class="toggle-icon">+</span>
2 Simulating ERPs
</a>
<div class="submenu">
Expand Down Expand Up @@ -145,13 +147,15 @@ <h2 id="preface-introducing-the-human-neocortical-neurosolver">
};

function toggleSubmenu(event) {
const submenu = event.target.nextElementSibling; // Get the submenu for the clicked header
const header = event.target.closest('#sidebar-header'); // Get the clicked header
const submenu = header.nextElementSibling; // Get the submenu
const toggleIcon = header.querySelector('.toggle-icon'); // Get the icon

// If the submenu exists, toggle it
if (submenu && submenu.classList.contains('submenu')) {
submenu.classList.toggle('open'); // Toggle the 'open' class to control visibility
toggleIcon.textContent = submenu.classList.contains('open') ? '-' : '+'; // Update icon
}
};
}

// This function will add the full text to the title attribute for all anchor tags
document.querySelectorAll('.sidebar a').forEach(anchor => {
Expand Down
1 change: 1 addition & 0 deletions create_navbar.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ def create_toggle_section(toggle_label):
section = f'\n{indent}<div class="sidebar-list">' + \
f'\n{indent}\t<a id="sidebar-header"' + \
' onclick="toggleSubmenu(event)">' + \
f'\n{indent}<span class="toggle-icon">+</span>' + \
f'\n{indent}{indent}{toggle_label}' + \
f'\n{indent}\t</a>' + \
f'\n{indent}\t<div class="submenu">'
Expand Down
8 changes: 5 additions & 3 deletions templates/script.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,15 @@
};

function toggleSubmenu(event) {
const submenu = event.target.nextElementSibling; // Get the submenu for the clicked header
const header = event.target.closest('#sidebar-header'); // Get the clicked header
const submenu = header.nextElementSibling; // Get the submenu
const toggleIcon = header.querySelector('.toggle-icon'); // Get the icon

// If the submenu exists, toggle it
if (submenu && submenu.classList.contains('submenu')) {
submenu.classList.toggle('open'); // Toggle the 'open' class to control visibility
toggleIcon.textContent = submenu.classList.contains('open') ? '-' : '+'; // Update icon
}
};
}

// This function will add the full text to the title attribute for all anchor tags
document.querySelectorAll('.sidebar a').forEach(anchor => {
Expand Down

0 comments on commit d115a9e

Please sign in to comment.