diff --git a/packages/ui/assets/png/logo-vert.png b/packages/ui/assets/png/logo-vert.png new file mode 100644 index 0000000..da3941b Binary files /dev/null and b/packages/ui/assets/png/logo-vert.png differ diff --git a/packages/ui/assets/png/logo.png b/packages/ui/assets/png/logo.png new file mode 100644 index 0000000..abc2c0b Binary files /dev/null and b/packages/ui/assets/png/logo.png differ diff --git a/packages/ui/assets/svg/bus-marker.svg b/packages/ui/assets/svg/bus-marker.svg new file mode 100644 index 0000000..76663e3 --- /dev/null +++ b/packages/ui/assets/svg/bus-marker.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/assets/svg/bus.svg b/packages/ui/assets/svg/bus.svg new file mode 100644 index 0000000..7269297 --- /dev/null +++ b/packages/ui/assets/svg/bus.svg @@ -0,0 +1 @@ + diff --git a/packages/ui/assets/svg/logo-alt.svg b/packages/ui/assets/svg/logo-alt.svg new file mode 100644 index 0000000..bd24727 --- /dev/null +++ b/packages/ui/assets/svg/logo-alt.svg @@ -0,0 +1 @@ + diff --git a/packages/ui/assets/svg/logo.svg b/packages/ui/assets/svg/logo.svg new file mode 100644 index 0000000..28cd439 --- /dev/null +++ b/packages/ui/assets/svg/logo.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/assets/svg/map-tile.svg b/packages/ui/assets/svg/map-tile.svg new file mode 100644 index 0000000..13c712f --- /dev/null +++ b/packages/ui/assets/svg/map-tile.svg @@ -0,0 +1 @@ + diff --git a/packages/ui/index.html b/packages/ui/index.html index 75533be..a2b1bf8 100644 --- a/packages/ui/index.html +++ b/packages/ui/index.html @@ -27,6 +27,7 @@ crossorigin="anonymous" referrerpolicy="no-referrer" /> +
diff --git a/packages/ui/src/components/navigation.tsx b/packages/ui/src/components/navigation.tsx index 955e237..3e58974 100644 --- a/packages/ui/src/components/navigation.tsx +++ b/packages/ui/src/components/navigation.tsx @@ -7,6 +7,8 @@ import { Cog } from '@busmap/components/icons/cog' import { InfoCircle } from '@busmap/components/icons/infoCircle' import { Exchange } from '@busmap/components/icons/exchange' import { + SO, + SDB10S, PB70T, PB80T, PB30T, @@ -19,6 +21,8 @@ import { import { useGlobals } from '@core/globals.js' import { useTheme } from '@module/settings/contexts/theme.js' +import logoSvg from '../../assets/svg/logo.svg?raw' + import type { FC, MouseEvent } from 'react' import type { Page } from '@core/types.js' import type { Mode } from '@module/settings/types.js' @@ -31,7 +35,7 @@ const Nav = styled.nav<{ mode: Mode }>` ul { margin: 0; - padding: 5px 0 0; + padding: 12px 0 0; list-style: none; display: flex; flex-direction: column; @@ -87,6 +91,23 @@ const Nav = styled.nav<{ mode: Mode }>` } } + li:first-child { + a { + display: flex; + align-items: center; + justify-content: center; + color: ${({ mode }) => (mode === 'light' ? SDB10S : SO)}; + + svg { + width: 40px; + + path.bus { + fill: ${({ mode }) => (mode === 'light' ? PB90T : DARK_MODE_FIELD)}; + } + } + } + } + li:last-child { margin-top: auto; @@ -99,7 +120,7 @@ const Nav = styled.nav<{ mode: Mode }>` } } - @media (width >= 431px) { + @media (width >= 431px) and (height >= 536px) { ul { width: 78px; } @@ -114,6 +135,12 @@ const Nav = styled.nav<{ mode: Mode }>` display: block; } } + + li:first-child a { + svg { + width: 64px; + } + } } ` const Navigation: FC = () => { @@ -134,6 +161,11 @@ const Navigation: FC = () => { return (