fix(sidebar): make full size

hello-nrfcloud · Feb 20, 2024 · bd19566 · bd19566
1 parent ee06d3f
commit bd19566
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 15 deletions.
diff --git a/src/MapApp.css b/src/MapApp.css
@@ -1,3 +1,3 @@
 #root > main {
-  margin-left: calc(60px + 1vw);
+  margin-left: calc(var(--base-size-sidebar) + 1vw);
 }
diff --git a/src/base.css b/src/base.css
@@ -9,6 +9,13 @@
   --bg-blue-8: #020d47;
   --color-warning: #e7c27b;
   --color-dark-red: #860404;
+  --base-size-sidebar: 40px;
+}
+
+@media (min-width: 400px) {
+  :root {
+    --base-size-sidebar: 60px;
+  }
 }
 
 html,

diff --git a/src/component/Sidebar.css b/src/component/Sidebar.css
@@ -1,6 +1,6 @@
 nav.sidebar {
   background-color: var(--bg-blue-4);
-  width: 60px;
+  width: var(--base-size-sidebar);
   height: 100vh;
   position: fixed;
   left: 0;
@@ -19,8 +19,8 @@ nav.sidebar hr {
 }
 
 nav.sidebar .button {
-  width: 59px;
-  height: 59px;
+  width: calc(var(--base-size-sidebar) - 1px);
+  height: calc(var(--base-size-sidebar) - 1px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -37,27 +37,44 @@ nav.sidebar .white {
 
 aside.sidebar {
   position: fixed;
-  left: 59px;
-  top: 60px;
+  left: calc(var(--base-size-sidebar) - 1px);
+  top: var(--base-size-sidebar);
+  border-top-right-radius: calc(var(--base-size-sidebar) / 2);
 }
 
 aside.sidebar > header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 60px;
+  height: var(--base-size-sidebar);
   margin: 0 1rem;
 }
 
+aside.sidebar nav {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  color: 1px solid rgba(0, 0, 0, 0.5);
+  margin: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+}
+
+aside.sidebar .close {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 aside.sidebar.warning {
   background-color: var(--color-warning);
   color: var(--color-dark-red);
-
-  min-height: 50vh;
+  border-bottom-color: var(--color-dark-red);
+  height: calc(100vh - var(--base-size-sidebar));
 }
 
 @media (min-width: 400px) {
   aside.sidebar.warning {
-    width: 300px;
+    width: calc(400px - var(--base-size-sidebar));
   }
 }
diff --git a/src/component/Sidebar.tsx b/src/component/Sidebar.tsx
@@ -19,11 +19,13 @@ export const Sidebar = () => {
 				<SidebarContent class="warning">
 					<header>
 						<h1>Under construction!</h1>
-						<a href="#">
-							<Close />
-						</a>
 					</header>
-
+					<nav>
+						<span></span>
+						<a href="#" class="close">
+							<Close size={20} />
+						</a>
+					</nav>
 					<div style={{ padding: '1rem' }}>
 						<p>
 							This website is under construction and not intended for production
@@ -43,7 +45,11 @@ const SidebarContent = (props: ParentProps<{ class?: string }>) => (
 const SidebarNav = () => (
 	<nav class="sidebar">
 		<a href="#" class="button white">
-			<img src="/assets/logo.svg" class="logo" alt="hello.nrfcloud.com logo" />
+			<img
+				src="../assets/logo.svg"
+				class="logo"
+				alt="hello.nrfcloud.com logo"
+			/>
 		</a>
 		<hr />
 		<a class="button warning" href="#warning">