feat: add sidebar and WIP note

hello-nrfcloud · Jan 22, 2024 · ea37324 · ea37324
1 parent 352f23b
commit ea37324
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" class="h-100"></div>
+    <div id="root"></div>
     <script src="/src/index.tsx" type="module"></script>
   </body>
 </html>
diff --git a/src/MapApp.css b/src/MapApp.css
@@ -0,0 +1,3 @@
+#root > main {
+  margin-left: calc(60px + 1vw);
+}
diff --git a/src/MapApp.tsx b/src/MapApp.tsx
@@ -1,25 +1,17 @@
 import { Devices } from './component/Devices.jsx'
-import { useParameters } from './context/Parameters.js'
+import { ExperimentalWarning } from './component/ExperimentalWarning.jsx'
+import { Sidebar } from './component/Sidebar.jsx'
 
-export const MapApp = () => {
-	const parameters = useParameters()
+import './MapApp.css'
 
+export const MapApp = () => {
 	return (
 		<>
+			<Sidebar />
+			<ExperimentalWarning />
 			<main>
 				<Devices />
 			</main>
-			<aside style={{ 'margin-top': '2rem' }}>
-				<h1>Parameters</h1>
-				<dl>
-					<dt>
-						<code>devicesAPIURL</code>
-					</dt>
-					<dd>
-						<code>{parameters.devicesAPIURL.toString()}</code>
-					</dd>
-				</dl>
-			</aside>
 		</>
 	)
 }
diff --git a/src/component/ExperimentalWarning.css b/src/component/ExperimentalWarning.css
@@ -0,0 +1,14 @@
+.experimental-warning {
+  position: absolute;
+  top: 1rem;
+  justify-content: center;
+  width: 100vw;
+  display: flex;
+}
+
+.experimental-warning div {
+  background-color: #e7c27b;
+  color: #333;
+  padding: 0.5rem;
+  border-radius: 4px;
+}
diff --git a/src/component/ExperimentalWarning.tsx b/src/component/ExperimentalWarning.tsx
@@ -0,0 +1,7 @@
+import './ExperimentalWarning.css'
+
+export const ExperimentalWarning = () => (
+	<aside class="experimental-warning">
+		<div role="alert">Work in progress!</div>
+	</aside>
+)
diff --git a/src/component/Sidebar.css b/src/component/Sidebar.css
@@ -0,0 +1,20 @@
+nav.sidebar {
+  background-color: var(--bg-blue-4);
+  width: 60px;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  border-right: 1px solid var(--bg-blue-1);
+}
+
+nav.sidebar .logo {
+  padding: 10px;
+}
+
+nav.sidebar hr {
+  border-top: 1px solid var(--bg-blue-8);
+  border-bottom: 1px solid var(--bg-blue-1);
+  width: 100%;
+  padding: 0;
+}
diff --git a/src/component/Sidebar.tsx b/src/component/Sidebar.tsx
@@ -0,0 +1,10 @@
+import './Sidebar.css'
+
+export const Sidebar = () => (
+	<nav class="sidebar">
+		<a href="/map">
+			<img src="/assets/logo.svg" class="logo" alt="hello.nrfcloud.com logo" />
+		</a>
+		<hr />
+	</nav>
+)
diff --git a/src/index.tsx b/src/index.tsx
@@ -10,7 +10,7 @@ import { DevicesProvider } from './context/Devices.jsx'
 const root = document.getElementById('root')
 
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
-	throw new Error('Root element not found. ')
+	throw new Error('Root element not found.')
 }
 
 render(