[OCaml] Mobile-friendly clone of cgit.
Collapse navbar into hamburger menu on mobile
- Add hidden checkbox + label hamburger toggle (CSS-only, no JS) - On screens <= 600px: nav collapses to right-aligned hamburger icon - Tapping hamburger reveals full-width vertical menu - Add 'Home' link in nav pointing to site root - Hamburger hidden on desktop; nav renders normally
Changed files
lib/static/styles.css
@@ -49,16 +49,7 @@
49
49
border: 0;
50
50
}
51
51
52
Removed:
#index-link {
53
Removed:
color: skyblue;
54
Removed:
text-decoration: none;
55
Removed:
font-size: 0.9em;
56
Removed:
}
57
52
58
Removed:
#index-link:hover {
59
Removed:
text-decoration: underline;
60
Removed:
}
61
Removed:
62
53
#page-header .site-logo {
63
54
width: 2.5em;
64
55
height: 2.5em;
@@ -73,13 +64,48 @@
73
64
nav#top {
74
65
background-color: black;
75
66
border-radius: 0.25rem;
67
Added:
position: sticky;
68
Added:
top: 0;
69
Added:
z-index: 10;
70
Added:
display: flex;
71
Added:
align-items: center;
72
Added:
justify-content: space-between;
76
73
}
77
74
75
Added:
.nav-toggle {
76
Added:
position: absolute;
77
Added:
opacity: 0;
78
Added:
width: 0;
79
Added:
height: 0;
80
Added:
pointer-events: none;
81
Added:
}
82
Added:
83
Added:
.nav-hamburger {
84
Added:
display: none;
85
Added:
}
86
Added:
87
Added:
.nav-home {
88
Added:
display: flex;
89
Added:
align-items: center;
90
Added:
color: white;
91
Added:
text-decoration: none;
92
Added:
padding: 0.5em 1em;
93
Added:
min-height: 44px;
94
Added:
border-radius: 0.25rem;
95
Added:
}
96
Added:
97
Added:
.nav-home:hover {
98
Added:
background-color: white;
99
Added:
color: black;
100
Added:
}
101
Added:
78
102
nav#top ul {
79
103
display: flex;
80
104
flex-wrap: wrap;
81
105
list-style-type: none;
82
106
padding: 0;
107
Added:
margin: 0;
108
Added:
margin-left: auto;
83
109
}
84
110
85
111
nav#top ul li {
@@ -299,9 +325,50 @@
299
325
height: 2em;
300
326
}
301
327
328
Added:
.nav-hamburger {
329
Added:
display: flex;
330
Added:
align-items: center;
331
Added:
justify-content: center;
332
Added:
width: 44px;
333
Added:
height: 44px;
334
Added:
cursor: pointer;
335
Added:
border-radius: 0.25rem;
336
Added:
font-size: 1.5em;
337
Added:
color: white;
338
Added:
}
339
Added:
340
Added:
.nav-hamburger:hover {
341
Added:
background-color: #333;
342
Added:
}
343
Added:
344
Added:
nav#top {
345
Added:
display: flex;
346
Added:
flex-wrap: wrap;
347
Added:
align-items: center;
348
Added:
justify-content: initial;
349
Added:
margin: 0;
350
Added:
border-radius: 0;
351
Added:
}
352
Added:
353
Added:
nav#top .nav-home {
354
Added:
margin-right: auto;
355
Added:
}
356
Added:
357
Added:
nav#top ul {
358
Added:
display: none;
359
Added:
width: 100%;
360
Added:
flex-direction: column;
361
Added:
margin-left: 0;
362
Added:
}
363
Added:
364
Added:
.nav-toggle:checked ~ ul {
365
Added:
display: flex;
366
Added:
}
367
Added:
302
368
nav#top ul li a {
303
Removed:
padding: 0.5em 0.6em;
369
Added:
padding: 0.75em 1em;
304
370
font-size: 0.9em;
371
Added:
width: 100%;
305
372
}
306
373
307
374
#blob {
lib/views.ml
@@ -35,7 +35,14 @@
35
35
HTML.(
36
36
nav
37
37
[ id "top"; Aria.label "Repository navigation" ]
38
Removed:
[ ul [] @@ List.map li_of_item nav_items ])
38
Added:
[
39
Added:
Routes.link_to Root ~other_attrs:[ class_ "nav-home" ] (txt "Home");
40
Added:
input [ type_ "checkbox"; id "nav-toggle"; class_ "nav-toggle" ];
41
Added:
label
42
Added:
[ for_ "nav-toggle"; class_ "nav-hamburger"; Aria.label "Menu" ]
43
Added:
[ txt "\xe2\x8b\xae" ];
44
Added:
ul [] (List.map li_of_item nav_items);
45
Added:
])
39
46
end
40
47
41
48
module Page = struct
@@ -79,10 +86,6 @@
79
86
body []
80
87
[
81
88
a [ href "#main"; class_ "skip-link" ] [ txt "Skip to content" ];
82
Removed:
(match bd.repo with
83
Removed:
| None -> null []
84
Removed:
| Some _ ->
85
Removed:
Routes.link_to Root ~other_attrs:[ id "index-link" ] (txt "index"));
86
89
page_header bd.title bd.subtitle;
87
90
(match bd.repo with
88
91
| None -> HTML.null []