admin: logo in the menu
Massimo Melina committed
Feb 2, 2023 at 12:57 UTC
abf45a6622a08c65c524e12b42d11ffc7419f1e2
2 files changed
+56
-3
admin/public/hfs-logo.svg
new
+43
@@ -0,0 +1,43 @@
1
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io -->
2
+<svg xmlns="http://www.w3.org/2000/svg"
3
+ xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 512 512" width="512pt" height="512pt">
4
+ <defs>
5
+ <clipPath id="_clipPath_rgwhRu7KShARwLS20t2iyAGct3fRx9sb">
6
+ <rect width="512" height="512"/>
7
+ </clipPath>
8
+ </defs>
9
+ <g clip-path="url(#_clipPath_rgwhRu7KShARwLS20t2iyAGct3fRx9sb)">
10
+ <g>
11
+ <path d=" M 351.693 234.532 L 163.155 234.532 C 147.879 234.511 135.475 245.132 135.45 258.255 C 135.448 259.323 135.53 260.39 135.695 261.448 C 136.088 264.057 138.869 265.898 141.906 265.56 C 142.646 265.478 143.359 265.269 144.002 264.944 C 146.448 263.721 149.234 263.089 152.065 263.115 L 191.547 263.115 C 198.672 263.132 205.003 267.025 207.318 272.814 L 208.26 275.424 C 212.076 285.128 222.656 291.67 234.578 291.697 L 362.784 291.697 C 365.692 291.699 368.548 292.356 371.068 293.603 C 371.92 294.029 372.888 294.253 373.874 294.251 C 376.936 294.251 379.419 292.118 379.419 289.487 L 379.419 258.351 C 379.419 245.196 367.006 234.532 351.693 234.532 L 351.693 234.532 Z " fill="rgb(255,160,0)"/>
12
+ <path d=" M 376.68 285.39 C 372.461 283.278 367.666 282.167 362.783 282.17 L 234.577 282.17 C 227.452 282.153 221.122 278.26 218.807 272.471 L 217.864 269.86 C 214.048 260.157 203.468 253.615 191.546 253.587 L 152.064 253.587 C 147.3 253.548 142.611 254.611 138.489 256.665 C 129.749 260.867 124.335 268.801 124.338 277.406 L 124.338 391.738 C 124.338 404.892 136.751 415.556 152.064 415.556 L 362.783 415.556 C 378.096 415.556 390.509 404.892 390.509 391.738 L 390.509 305.989 C 390.543 297.487 385.264 289.623 376.68 285.39 L 376.68 285.39 Z " fill="rgb(255,193,7)"/>
13
+ </g>
14
+ <g>
15
+ <g>
16
+ <path d=" M 440.195 128.939 L 441.681 127.373 C 450.505 118.072 450.119 103.381 440.819 94.557 C 431.52 85.733 416.829 86.119 408.005 95.418 L 406.519 96.984 L 417.29 119.355 L 440.195 128.939 Z " fill="rgb(241,205,101)"/>
17
+ </g>
18
+ <g>
19
+ <path d=" M 406.518 96.985 L 391.824 112.471 L 402.359 135.091 L 425.502 144.424 L 440.195 128.939 C 435.188 123.124 429.855 117.5 424.169 112.105 C 418.484 106.709 412.587 101.679 406.518 96.985 L 406.518 96.985 Z " fill="rgb(235,179,79)"/>
20
+ </g>
21
+ <g>
22
+ <path d=" M 454.721 398.439 C 500.67 310.461 485.053 199.301 409.476 127.59 C 333.899 55.879 222.072 46.116 136.626 96.616 L 288.556 255.029 L 454.721 398.439 Z " fill="rgb(230,230,230)"/>
23
+ </g>
24
+ <g>
25
+ <path d=" M 136.626 96.616 C 130.372 100.313 124.253 104.321 118.307 108.662 L 443.653 417.365 C 447.676 411.199 451.357 404.879 454.721 398.439 L 136.626 96.616 Z " fill="rgb(179,179,179)"/>
26
+ </g>
27
+ </g>
28
+ <g>
29
+ <g>
30
+ <path d=" M 15.729 425.455 C 15.729 436.59 24.881 445.774 31.63 445.774 L 457.861 445.774 C 464.61 445.774 473.762 437.301 473.762 425.455 C 470.502 419.481 464.61 415.476 457.861 415.476 L 31.63 415.476 C 24.881 415.475 18.988 419.481 15.729 425.455 Z " fill="rgb(230,230,230)"/>
31
+ </g>
32
+ <g>
33
+ <path d=" M 457.861 435.434 L 31.63 435.434 C 24.88 435.434 18.988 431.428 15.729 425.455 C 14.028 428.573 13.031 432.217 13.031 436.128 C 13.031 447.534 21.358 456.781 31.631 456.781 L 457.862 456.781 C 468.134 456.781 476.461 447.534 476.461 436.128 C 476.461 432.216 475.464 428.572 473.763 425.455 C 470.502 431.428 464.61 435.434 457.861 435.434 Z " fill="rgb(204,204,204)"/>
34
+ </g>
35
+ </g>
36
+ <g>
37
+ <path d=" M 142.529 185.294 C 139.684 168.647 129.054 161.558 122.975 155.597 C 102.021 135.049 97.817 128.964 93.269 112.592 C 88.093 93.964 89.813 76.757 97.586 69.408 C 102.609 64.658 104.366 65.258 99.779 70.157 C 90.572 79.992 91.516 93.396 102.698 111.584 C 109.782 123.107 111.496 125.579 120.2 136.843 C 135.485 153.38 147.887 169.586 145.473 187.536 L 144.295 195.615 L 142.529 185.294 Z " fill="rgb(230,230,230)"/>
38
+ </g>
39
+ <g>
40
+ <path d=" M 125.367 215.618 C 122.522 198.971 111.892 191.882 105.813 185.92 C 84.859 165.373 80.655 159.287 76.107 142.916 C 70.931 124.288 72.651 107.081 80.423 99.731 C 85.447 94.982 87.203 95.581 82.617 100.481 C 73.409 110.316 74.354 123.72 85.536 141.907 C 92.62 153.431 94.334 155.903 103.038 167.167 C 118.323 183.703 130.724 199.909 128.311 217.86 L 127.132 225.938 L 125.367 215.618 Z " fill="rgb(230,230,230)"/>
41
+ </g>
42
+ </g>
43
+</svg>
\ No newline at end of file
admin/src/MainMenu.ts
+13
-3
@@ -48,12 +48,18 @@ let version: any // cache 'version', as it won't change at runtime, while the Dr
48
export default function Menu({ onSelect }: { onSelect: ()=>void }) {
49
const [status] = useApi(!version && 'get_status')
50
version ||= status?.version?.replace('-', ' ')
51
- return h(List, { sx:{ pr:1, bgcolor: 'primary.main', color:'primary.contrastText', minHeight: '100%', boxSizing: 'border-box' } },
51
+ return h(List, {
52
+ sx:{
53
+ pr: 1, bgcolor: 'primary.main', color: 'primary.contrastText', minHeight: '100%', boxSizing: 'border-box',
54
+ maxHeight: '100vh', // avoid reserving extra space for the final logo
55
+ display: 'flex', flexDirection: 'column', '&>a': { flex: '0' },
56
+ }
57
+ },
58
h(Box, { display: 'flex', px: 2, py: 1, gap: 2, alignItems: 'flex-end' },
59
h(Typography, { variant:'h3' }, 'HFS'),
60
h(Box, { pb: 1, fontSize: 'small' }, version),
61
),
56
- mainMenu.map(it =>
62
+ mainMenu.map(it =>
63
h(ListItemButton, {
64
key: it.path,
65
to: it.path,
@@ -65,7 +71,11 @@ export default function Menu({ onSelect }: { onSelect: ()=>void }) {
71
},
72
it.icon && h(ListItemIcon, { sx:{ color: 'primary.contrastText' } }, h(it.icon)),
73
h(ListItemText, { primary: getMenuLabel(it) })
68
- ) )
74
+ ) ),
75
+ h('img', { src: 'hfs-logo.svg', style: {
76
+ opacity: .7, bottom: 0, width: '80%', marginLeft: 'auto', marginRight: 'auto', flex: 1,
77
+ height: 0, // trick: without this the flex doesn't work
78
+ } }),
79
)
80
}
81