Skip to content

Commit ea37324

Browse files
coderbyheartcoderbyheart
committed
feat: add sidebar and WIP note
1 parent 352f23b commit ea37324

File tree

8 files changed

+62
-16
lines changed

8 files changed

+62
-16
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</head>
1616
<body>
1717
<noscript>You need to enable JavaScript to run this app.</noscript>
18-
<div id="root" class="h-100"></div>
18+
<div id="root"></div>
1919
<script src="/src/index.tsx" type="module"></script>
2020
</body>
2121
</html>

‎src/MapApp.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#root > main {
2+
margin-left: calc(60px + 1vw);
3+
}

‎src/MapApp.tsx‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
11
import { Devices } from './component/Devices.jsx'
2-
import { useParameters } from './context/Parameters.js'
2+
import { ExperimentalWarning } from './component/ExperimentalWarning.jsx'
3+
import { Sidebar } from './component/Sidebar.jsx'
34

4-
export const MapApp = () => {
5-
const parameters = useParameters()
5+
import './MapApp.css'
66

7+
export const MapApp = () => {
78
return (
89
<>
10+
<Sidebar />
11+
<ExperimentalWarning />
912
<main>
1013
<Devices />
1114
</main>
12-
<aside style={{ 'margin-top': '2rem' }}>
13-
<h1>Parameters</h1>
14-
<dl>
15-
<dt>
16-
<code>devicesAPIURL</code>
17-
</dt>
18-
<dd>
19-
<code>{parameters.devicesAPIURL.toString()}</code>
20-
</dd>
21-
</dl>
22-
</aside>
2315
</>
2416
)
2517
}

‎src/component/ExperimentalWarning.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.experimental-warning {
2+
position: absolute;
3+
top: 1rem;
4+
justify-content: center;
5+
width: 100vw;
6+
display: flex;
7+
}
8+
9+
.experimental-warning div {
10+
background-color: #e7c27b;
11+
color: #333;
12+
padding: 0.5rem;
13+
border-radius: 4px;
14+
}

‎src/component/ExperimentalWarning.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import './ExperimentalWarning.css'
2+
3+
export const ExperimentalWarning = () => (
4+
<aside class="experimental-warning">
5+
<div role="alert">Work in progress!</div>
6+
</aside>
7+
)

‎src/component/Sidebar.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
nav.sidebar {
2+
background-color: var(--bg-blue-4);
3+
width: 60px;
4+
height: 100vh;
5+
position: fixed;
6+
left: 0;
7+
top: 0;
8+
border-right: 1px solid var(--bg-blue-1);
9+
}
10+
11+
nav.sidebar .logo {
12+
padding: 10px;
13+
}
14+
15+
nav.sidebar hr {
16+
border-top: 1px solid var(--bg-blue-8);
17+
border-bottom: 1px solid var(--bg-blue-1);
18+
width: 100%;
19+
padding: 0;
20+
}

‎src/component/Sidebar.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import './Sidebar.css'
2+
3+
export const Sidebar = () => (
4+
<nav class="sidebar">
5+
<a href="/map">
6+
<img src="/assets/logo.svg" class="logo" alt="hello.nrfcloud.com logo" />
7+
</a>
8+
<hr />
9+
</nav>
10+
)

‎src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { DevicesProvider } from './context/Devices.jsx'
1010
const root = document.getElementById('root')
1111

1212
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
13-
throw new Error('Root element not found. ')
13+
throw new Error('Root element not found.')
1414
}
1515

1616
render(

0 commit comments

Comments
 (0)