Skip to content

Commit 917228d

Browse files
suhaibbinyounissuhaibbinyounis
committed
fix(website): responsive sidebar and analytics integration
1 parent 7e2d669 commit 917228d

8 files changed

Lines changed: 324 additions & 85 deletions

File tree

‎.DS_Store‎

6 KB
Binary file not shown.

‎website/api.html‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,24 @@
8181
font-size: 0.875rem;
8282
}
8383
</style>
84+
85+
<!-- Google tag (gtag.js) -->
86+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4Y0K38JFR0"></script>
87+
<script>
88+
window.dataLayer = window.dataLayer || [];
89+
function gtag() { dataLayer.push(arguments); }
90+
gtag('js', new Date());
91+
gtag('config', 'G-4Y0K38JFR0');
92+
</script>
93+
94+
<!-- Microsoft Clarity -->
95+
<script type="text/javascript">
96+
(function (c, l, a, r, i, t, y) {
97+
c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
98+
t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
99+
y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
100+
})(window, document, "clarity", "script", "ur0y471x2g");
101+
</script>
84102
</head>
85103

86104
<body>
@@ -119,6 +137,14 @@
119137
<!-- API Reference Layout -->
120138
<div class="container">
121139
<div class="docs-layout">
140+
<!-- Mobile Sidebar Toggle -->
141+
<button class="docs-sidebar-toggle" aria-label="Toggle navigation menu">
142+
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
143+
<path
144+
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
145+
</svg>
146+
Show Navigation
147+
</button>
122148
<!-- Sidebar -->
123149
<aside class="docs-sidebar">
124150
<div class="docs-nav-section">
@@ -244,7 +270,8 @@ <h4>Request Body</h4>
244270
<td><code>model</code> <span class="param-required">required</span></td>
245271
<td><span class="param-type">string</span></td>
246272
<td>Model ID (e.g., <code>gpt-4o</code>, <code>gpt-4</code>,
247-
<code>gpt-3.5-turbo</code>)</td>
273+
<code>gpt-3.5-turbo</code>)
274+
</td>
248275
</tr>
249276
<tr>
250277
<td><code>messages</code> <span class="param-required">required</span></td>

‎website/css/styles.css‎

Lines changed: 61 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -792,6 +792,35 @@ p {
792792
min-height: 100vh;
793793
}
794794

795+
/* Sidebar toggle button - only visible on mobile */
796+
.docs-sidebar-toggle {
797+
display: none;
798+
width: 100%;
799+
padding: var(--space-md);
800+
background: var(--bg-surface);
801+
border: 1px solid rgba(255, 255, 255, 0.1);
802+
border-radius: var(--radius-lg);
803+
color: var(--text-primary);
804+
font-size: var(--text-base);
805+
font-weight: 500;
806+
cursor: pointer;
807+
margin-bottom: var(--space-md);
808+
transition: all var(--transition-fast);
809+
}
810+
811+
.docs-sidebar-toggle:hover {
812+
background: var(--bg-surface-light);
813+
}
814+
815+
.docs-sidebar-toggle svg {
816+
margin-right: var(--space-sm);
817+
transition: transform var(--transition-fast);
818+
}
819+
820+
.docs-sidebar-toggle.active svg {
821+
transform: rotate(180deg);
822+
}
823+
795824
.docs-sidebar {
796825
position: sticky;
797826
top: 100px;
@@ -1162,9 +1191,22 @@ p {
11621191

11631192
.nav-toggle {
11641193
display: flex;
1165-
padding: var(--space-sm);
1166-
border-radius: var(--radius-md);
1167-
background: var(--bg-surface);
1194+
flex-direction: column;
1195+
justify-content: space-between;
1196+
width: 30px;
1197+
height: 24px;
1198+
padding: 0;
1199+
border: none;
1200+
background: transparent;
1201+
cursor: pointer;
1202+
}
1203+
1204+
.nav-toggle span {
1205+
width: 100%;
1206+
height: 2px;
1207+
background-color: var(--text-primary);
1208+
border-radius: 2px;
1209+
transition: all 0.3s ease;
11681210
}
11691211

11701212
/* Hero */
@@ -1368,9 +1410,25 @@ p {
13681410
padding-top: 70px;
13691411
}
13701412

1413+
/* Mobile sidebar toggle button */
1414+
.docs-sidebar-toggle {
1415+
display: flex;
1416+
align-items: center;
1417+
justify-content: center;
1418+
}
1419+
1420+
/* Hide sidebar by default on mobile */
13711421
.docs-sidebar {
1422+
display: none;
13721423
padding: var(--space-md);
13731424
border-radius: var(--radius-lg);
1425+
position: relative;
1426+
top: 0;
1427+
}
1428+
1429+
/* Show sidebar when toggle is active */
1430+
.docs-sidebar.active {
1431+
display: block;
13741432
}
13751433

13761434
.docs-nav-section {

‎website/docs.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,24 @@
3232

3333
<!-- Styles -->
3434
<link rel="stylesheet" href="css/styles.css">
35+
36+
<!-- Google tag (gtag.js) -->
37+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4Y0K38JFR0"></script>
38+
<script>
39+
window.dataLayer = window.dataLayer || [];
40+
function gtag() { dataLayer.push(arguments); }
41+
gtag('js', new Date());
42+
gtag('config', 'G-4Y0K38JFR0');
43+
</script>
44+
45+
<!-- Microsoft Clarity -->
46+
<script type="text/javascript">
47+
(function (c, l, a, r, i, t, y) {
48+
c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
49+
t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
50+
y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
51+
})(window, document, "clarity", "script", "ur0y471x2g");
52+
</script>
3553
</head>
3654

3755
<body>
@@ -70,6 +88,14 @@
7088
<!-- Documentation Layout -->
7189
<div class="container">
7290
<div class="docs-layout">
91+
<!-- Mobile Sidebar Toggle -->
92+
<button class="docs-sidebar-toggle" aria-label="Toggle navigation menu">
93+
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
94+
<path
95+
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
96+
</svg>
97+
Show Navigation
98+
</button>
7399
<!-- Sidebar -->
74100
<aside class="docs-sidebar">
75101
<div class="docs-nav-section">
@@ -480,6 +506,8 @@ <h3>Need more help?</h3>
480506
this.classList.add('active');
481507
});
482508
});
509+
510+
// Mobile sidebar toggle - Removed duplicate script
483511
</script>
484512
</body>
485513

‎website/faq.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,24 @@
3131

3232
<!-- Styles -->
3333
<link rel="stylesheet" href="css/styles.css">
34+
35+
<!-- Google tag (gtag.js) -->
36+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4Y0K38JFR0"></script>
37+
<script>
38+
window.dataLayer = window.dataLayer || [];
39+
function gtag() { dataLayer.push(arguments); }
40+
gtag('js', new Date());
41+
gtag('config', 'G-4Y0K38JFR0');
42+
</script>
43+
44+
<!-- Microsoft Clarity -->
45+
<script type="text/javascript">
46+
(function (c, l, a, r, i, t, y) {
47+
c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
48+
t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
49+
y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
50+
})(window, document, "clarity", "script", "ur0y471x2g");
51+
</script>
3452
</head>
3553

3654
<body>

0 commit comments

Comments
 (0)