Rearrange sidebar

src/components/ui/Sidebar.module.css

@@ -1,14 +1,15 @@
 .Sidebar {
-  height: 100vh;
-  width: max(25vw, 180px);
-  backdrop-filter: blur(20px);
-  background-color: rgba(0, 0, 0, 0.3);
+  flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  justify-content: center;
-  flex-shrink: 0;
+  justify-content: space-between;
+  height: 100vh;
+  width: max(25vw, 180px);
+  padding-bottom: 1.5rem;
 
+  backdrop-filter: blur(20px);
+  background-color: rgba(0, 0, 0, 0.3);
   opacity: 1;
   transition: opacity 0.5s ease, transform 0.5s ease;
 }
@@ -17,6 +18,12 @@
   opacity: 0;
 }
 
+.MenuWrapper {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
 .Menu {
   display: flex;
   flex-direction: column;

src/components/ui/Sidebar.tsx

@@ -22,19 +22,21 @@ export function Sidebar(props: SidebarProps) {
 
   return (
     <div classList={{ [style.Sidebar]: true, [style.Loading]: isInitialLoading() }}>
-      <ul class={style.Menu}>
-        <For each={props.categories()}>
-          {(category) => (
-            <li
-              classList={{ [style.Active]: isActive(category) }}
-              onClick={() => props.selectCategory(category, 'permanent')}
-              onMouseEnter={() => props.selectCategory(category, 'temporary')}
-            >
-              {category}
-            </li>
-          )}
-        </For>
-      </ul>
+      <div class={style.MenuWrapper}>
+        <ul class={style.Menu}>
+          <For each={props.categories()}>
+            {(category) => (
+              <li
+                classList={{ [style.Active]: isActive(category) }}
+                onClick={() => props.selectCategory(category, 'permanent')}
+                onMouseEnter={() => props.selectCategory(category, 'temporary')}
+              >
+                {category}
+              </li>
+            )}
+          </For>
+        </ul>
+      </div>
       <div class={style.SettingsWrapper}>
         <FavoriteBackground />
         <Tooltip withArrow placement="top" label="Settings">