Skip to content

Commit 7394828

Browse files
reluctantfuturistreluctantfuturist
authored
docs: horizontal nav bar (#3407)
# What does this PR do? * Adds a horizontal nav bar for easy access to the API reference and the Llama Stack Github repo <img width="2696" height="520" alt="image" src="https://github.com/user-attachments/assets/82daffe1-c206-4e20-b95b-1e090011eecc" /> ## Test Plan * Built the docs and ran the local HTML server to verify changes
1 parent e980436 commit 7394828

File tree

3 files changed

+146
-0
lines changed

3 files changed

+146
-0
lines changed

‎docs/_static/css/my_theme.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,106 @@
11
@import url("theme.css");
22

3+
/* Horizontal Navigation Bar */
4+
.horizontal-nav {
5+
background-color: #ffffff;
6+
border-bottom: 1px solid #e5e5e5;
7+
padding: 0;
8+
position: fixed;
9+
top: 0;
10+
left: 0;
11+
right: 0;
12+
z-index: 1050;
13+
height: 50px;
14+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
15+
}
16+
17+
[data-theme="dark"] .horizontal-nav {
18+
background-color: #1a1a1a;
19+
border-bottom: 1px solid #333;
20+
}
21+
22+
.horizontal-nav .nav-container {
23+
max-width: 1200px;
24+
margin: 0 auto;
25+
display: flex;
26+
align-items: center;
27+
justify-content: space-between;
28+
padding: 0 20px;
29+
height: 100%;
30+
}
31+
32+
.horizontal-nav .nav-brand {
33+
font-size: 18px;
34+
font-weight: 600;
35+
color: #333;
36+
text-decoration: none;
37+
}
38+
39+
[data-theme="dark"] .horizontal-nav .nav-brand {
40+
color: #fff;
41+
}
42+
43+
.horizontal-nav .nav-links {
44+
display: flex;
45+
align-items: center;
46+
gap: 30px;
47+
list-style: none;
48+
margin: 0;
49+
padding: 0;
50+
}
51+
52+
.horizontal-nav .nav-links a {
53+
color: #666;
54+
text-decoration: none;
55+
font-size: 14px;
56+
font-weight: 500;
57+
padding: 8px 12px;
58+
border-radius: 6px;
59+
transition: all 0.2s ease;
60+
}
61+
62+
.horizontal-nav .nav-links a:hover,
63+
.horizontal-nav .nav-links a.active {
64+
color: #333;
65+
background-color: #f5f5f5;
66+
}
67+
68+
.horizontal-nav .nav-links a.active {
69+
font-weight: 600;
70+
}
71+
72+
[data-theme="dark"] .horizontal-nav .nav-links a {
73+
color: #ccc;
74+
}
75+
76+
[data-theme="dark"] .horizontal-nav .nav-links a:hover,
77+
[data-theme="dark"] .horizontal-nav .nav-links a.active {
78+
color: #fff;
79+
background-color: #333;
80+
}
81+
82+
.horizontal-nav .nav-links .github-link {
83+
display: flex;
84+
align-items: center;
85+
gap: 6px;
86+
}
87+
88+
.horizontal-nav .nav-links .github-icon {
89+
width: 16px;
90+
height: 16px;
91+
fill: currentColor;
92+
}
93+
94+
/* Adjust main content to account for fixed nav */
95+
.wy-nav-side {
96+
top: 50px;
97+
height: calc(100vh - 50px);
98+
}
99+
100+
.wy-nav-content-wrap {
101+
margin-top: 50px;
102+
}
103+
3104
.wy-nav-content {
4105
max-width: 90%;
5106
}

‎docs/_static/js/horizontal_nav.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Horizontal Navigation Bar for Llama Stack Documentation
2+
document.addEventListener('DOMContentLoaded', function() {
3+
// Create the horizontal navigation HTML
4+
const navHTML = `
5+
<nav class="horizontal-nav">
6+
<div class="nav-container">
7+
<a href="/" class="nav-brand">Llama Stack</a>
8+
<ul class="nav-links">
9+
<li><a href="/">Docs</a></li>
10+
<li><a href="/references/api_reference/">API Reference</a></li>
11+
<li><a href="https://github.com/meta-llama/llama-stack" target="_blank" class="github-link">
12+
<svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
13+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
14+
</svg>
15+
GitHub
16+
</a></li>
17+
</ul>
18+
</div>
19+
</nav>
20+
`;
21+
22+
// Insert the navigation at the beginning of the body
23+
document.body.insertAdjacentHTML('afterbegin', navHTML);
24+
25+
// Update navigation links based on current page
26+
updateActiveNav();
27+
});
28+
29+
function updateActiveNav() {
30+
const currentPath = window.location.pathname;
31+
const navLinks = document.querySelectorAll('.horizontal-nav .nav-links a');
32+
33+
navLinks.forEach(link => {
34+
// Remove any existing active classes
35+
link.classList.remove('active');
36+
37+
// Add active class based on current path
38+
if (currentPath === '/' && link.getAttribute('href') === '/') {
39+
link.classList.add('active');
40+
} else if (currentPath.includes('/references/api_reference/') && link.getAttribute('href').includes('api_reference')) {
41+
link.classList.add('active');
42+
}
43+
});
44+
}

‎docs/source/conf.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@
131131
def setup(app):
132132
app.add_css_file("css/my_theme.css")
133133
app.add_js_file("js/detect_theme.js")
134+
app.add_js_file("js/horizontal_nav.js")
134135
app.add_js_file("js/keyboard_shortcuts.js")
135136

136137
def dockerhub_role(name, rawtext, text, lineno, inliner, options={}, content=[]):

0 commit comments

Comments
 (0)