BostonCyclistsUnion · sckilcoyne · Mar 10, 2026 · Mar 18, 2026 · Mar 22, 2026 · Mar 27, 2026
diff --git a/.gitmodules b/.gitmodules
@@ -1,3 +1,3 @@
 [submodule "projecttracker"]
 	path = projecttracker
-	url = https://github.com/ZMYaro/bcu-project-tracker.git
+	url = https://github.com/BostonCyclistsUnion/project-tracker.git
diff --git a/_includes/head.html b/_includes/head.html
@@ -10,11 +10,31 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/ >
 		<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet" />
+		<script src="{{ site.baseurl }}/assets/components/navPanel.js"></script>
+
 	</head>
+
 	<body>
 		<header id="header-stripe">
-			<a href="{{ site.baseurl }}/">
-				<img src="{{ site.baseurl }}/assets/images/labs_wordmark.svg" alt="BCU Labs." class="logo" />
+			<a href="{{ site.baseurl }}/" class="logo-link">
+				<img src="{{ site.baseurl }}/assets/images/labs_logo_inkscape.svg" alt="BCU Labs" title="BCU Labs" class="logo"/>
 			</a>
-			{% if page.title and !page.title.empty? %}<h1>{{ page.title }}</h1>{% endif %}
+			{% if page.title %}<h1>{{ page.title }}</h1>{% endif %}
+			<div id="navPanel" class="sidepanel">
+				<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+				<a href="{{ site.baseurl }}/">Home</a>
+				<!-- <a href="{{ site.baseurl }}/map">Map</a> -->
+				<a href="{{ site.baseurl }}/projecttracker">Project Tracker</a>
+				<a href="{{ site.baseurl }}/stressmap">Stress Map</a>
+				<a href="{{ site.baseurl }}/crashes">Crash Map</a>
+				<!-- <a href="{{ site.baseurl }}/intersections">Intersections</a> -->
+				<a href="{{ site.baseurl }}/bikeparking">Bike Parking</a>
+				<!-- <a href="{{ site.baseurl }}/design">Street Design 101</a> -->
+			</div>
+			<button class="openbtn" onclick=openNav()>&#9776;</button> 
 		</header>
+		<!-- <script type="module" src="{{ site.baseurl }}/assets/components/head.js"></script> -->
+
+		<a href="{{ site.baseurl }}/">
+			<img src="{{ site.baseurl }}/assets/images/labs_wordmark.svg" alt="BCU Labs" title="BCU Labs" class="wordmark" />
+		</a>
diff --git a/assets/components/navPanel.js b/assets/components/navPanel.js
@@ -0,0 +1,11 @@
+// https://www.w3schools.com/howto/howto_js_collapse_sidepanel.asp
+
+/* Set the width of the sidebar to 250px (show it) */
+function openNav() {
+  document.getElementById("navPanel").style.width = "250px";
+}
+
+/* Set the width of the sidebar to 0 (hide it) */
+function closeNav() {
+  document.getElementById("navPanel").style.width = "0";
+} 
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -23,7 +23,7 @@
 
 	--header-max-height: 100px;
 	--header-min-height: 50px;
-	--header-padding: 20px;
+	--header-padding: 0px;
 	--section-padding: 10px;
 	--footer-padding: 15px;
 	--button-margin: 10px;
@@ -132,20 +132,94 @@ header {
 	position: sticky;
 	top: 0;
 	display: flex;
+	flex-wrap: nowrap;
+
 	justify-content: center;
 	align-items: center;
 	gap: 1rem;
-	flex-wrap: wrap;
-	padding-block: 0;
+	padding-block: 1vh;
+	z-index: 1000;
+
+	width: 100%;
+	height: 10vh;
+  	margin: 0;
 
 	.logo {
-		height: var(--header-max-height);
+		height: 80%;
+		padding: 10% 15px;
+		margin: 0 10px;
+	}
+	.logo-link {
+		height: 100%;
+	}
+	.navpanel {
+		height: 100%;
 	}
 	h1 {
-		font-size: 3rem;
-		font-weight: bold;
+		font-size: calc(10% + 4vh);
+		/* font-size: clamp(10px, 50vw, 8vh); */
+		container-type: inline-size; 
+		font-weight: bold;  
+		margin: 0;
+		width: 70%;
+		overflow-wrap: normal;
+		flex-grow: 1;
+		flex-shrink: 0;
+		flex-basis: 100px;
 	}
 }
+.wordmark {
+	height: var(--header-max-height);
+	max-width: 600px;  
+	display: block;
+	margin: auto;
+}
+/* The sidepanel menu */
+.sidepanel {
+  height: 250px; /* Specify a height */
+  width: 0; /* 0 width - change this with JavaScript */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Stay on top */
+  top: 0;
+  right: 0;
+  background-color: #111; /* Black*/
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 60px; /* Place content 60px from the top */
+  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
+}
+/* The sidepanel links */
+.sidepanel a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+/* When you mouse over the navigation links, change their color */
+.sidepanel a:hover {
+  color: #f1f1f1;
+}
+/* Position and style the close button (top right corner) */
+.sidepanel .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+/* Style the button that is used to open the sidepanel */
+.openbtn {
+  font-size: 20px;
+  cursor: pointer;
+  background-color: #111;
+  color: white;
+  padding: 10px 15px;
+  border: none;
+}
+.openbtn:hover {
+  background-color: #444;
+}
 
 main,
 section {

diff --git a/assets/images/labs_logo.png b/assets/images/labs_logo.png
diff --git a/assets/images/labs_logo.svg b/assets/images/labs_logo.svg
diff --git a/assets/images/labs_logo_inkscape.svg b/assets/images/labs_logo_inkscape.svg