feat(layout): Add Sidebar component as well as Layout service

apps/solid/src/layout/app-bars/top-app-bar.component.tsx

@@ -1,12 +1,18 @@
+import { Layout } from '@spuxx/solid';
 import { AppBar, Button } from '@spuxx/solid';
 
 export const TopAppBar = () => {
   return (
     <AppBar>
       <AppBar.Section>
-        <a href="/">
-          <Button icon="mdi:menu" title="Menu" variant="colored" color="text-default" rounded />
-        </a>
+        <Button
+          icon="mdi:menu"
+          title="Menu"
+          variant="colored"
+          color="text-default"
+          rounded
+          onClick={Layout.toggleSidebar}
+        />
       </AppBar.Section>
       <AppBar.Section>
         <a href="/">

apps/solid/src/layout/app.layout.tsx

@@ -1,11 +1,13 @@
 import { Component, ParentProps } from 'solid-js';
 import { TopAppBar } from './app-bars/top-app-bar.component';
 import { BottomAppBar } from './app-bars/bottom-app-bar.component';
+import { SideNav } from './side-nav/side-nav.component';
 
 export const AppLayout: Component<ParentProps> = (props) => {
   return (
     <>
       <TopAppBar />
+      <SideNav />
       <main>{props.children}</main>
       <BottomAppBar />
     </>

apps/solid/src/layout/side-nav/side-nav.component.tsx

@@ -0,0 +1,47 @@
+import { Button, ButtonLink, Layout, Sidebar } from '@spuxx/solid';
+import { UserAgent } from '@spuxx/browser-utils';
+import { For, Show } from 'solid-js';
+import { routes } from '../../routes/routes';
+
+export const SideNav = () => {
+  return (
+    <Sidebar side="left">
+      <Sidebar.Toolbar>
+        <Show when={!UserAgent.isDesktop}>
+          <Button
+            icon="mdi:backburger"
+            title="Close"
+            variant="colored"
+            color="text-default"
+            onClick={Layout.closeSidebar}
+          />
+        </Show>
+        <ButtonLink
+          icon="mdi:home"
+          title="Home"
+          href="/"
+          variant="colored"
+          color="text-default"
+          onClick={Layout.closeSidebarOnMobile}
+        />
+        <Button icon="mdi:account" title="Account" variant="colored" color="text-default" />
+        <Button icon="mdi:gear" title="Settings" variant="colored" color="text-default" />
+      </Sidebar.Toolbar>
+      <Sidebar.Content>
+        <nav>
+          <ul>
+            <For each={routes}>
+              {(route) => (
+                <li>
+                  <ButtonLink class="decoration-transparent" href={route.path}>
+                    {route.path}
+                  </ButtonLink>
+                </li>
+              )}
+            </For>
+          </ul>
+        </nav>
+      </Sidebar.Content>
+    </Sidebar>
+  );
+};

packages/browser-utils/src/styles/application.css

@@ -17,7 +17,7 @@ html.spx-app {
       max-width: 100%;
       margin: 0 auto;
       box-sizing: border-box;
-      padding: 1rem;
+      padding: 0.25rem;
     }
   }
 
@@ -35,11 +35,32 @@ html.spx-app {
   }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (min-width: 960px) {
   html.spx-app {
     > body {
       main {
-        padding: 0.25rem;
+        padding: 1rem;
+      }
+
+      #root {
+        width: 100%;
+        transition-property: margin, width;
+        transition-timing-function: var(--spx-sidebar-transition-timing-function);
+        transition-duration: var(--spx-sidebar-transition-duration);
+      }
+
+      &:has(.spx-sidebar[data-open]:not([data-closing])[data-side='left']) {
+        #root {
+          width: calc(100% - var(--spx-sidebar-width-full));
+          margin-left: var(--spx-sidebar-width-full);
+        }
+      }
+
+      &:has(.spx-sidebar[data-open]:not([data-closing])[data-side='right']) {
+        #root {
+          width: calc(100% - var(--spx-sidebar-width-full));
+          margin-right: var(--spx-sidebar-width-full);
+        }
       }
     }
   }

packages/browser-utils/src/styles/components.css

@@ -1,7 +1,6 @@
 @import './components/control/button.css';
 @import './components/control/input.css';
 @import './components/control/select.css';
-@import './components/layout/app-bar.css';
 @import './components/layout/divider.css';
 @import './components/layout/container.css';
 @import './components/typography/heading.css';

packages/browser-utils/src/styles/layout.css

@@ -1,6 +1,11 @@
+@import './layout/app-bar.css';
+@import './layout/sidebar.css';
+
 :root {
   --spx-z-modal: 85;
   --spx-z-modal-overlay: 81;
+  --spx-z-sidebar: 75;
+  --spx-z-sidebar-overlay: 71;
   --spx-z-app-bar: 51;
 }
 

packages/browser-utils/src/styles/components/layout/app-bar.css → packages/browser-utils/src/styles/layout/app-bar.css

@@ -2,7 +2,7 @@
   position: fixed;
   z-index: var(--spx-z-app-bar);
   height: var(--spx-app-bar-height);
-  width: 100svw;
+  width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -25,3 +25,21 @@
     justify-content: center;
   }
 }
+
+@media only screen and (min-width: 960px) {
+  html.spx-app {
+    > body {
+      .spx-app-bar {
+        transition-property: width;
+        transition-timing-function: var(--spx-sidebar-transition-timing-function);
+        transition-duration: var(--spx-sidebar-transition-duration);
+      }
+
+      &:has(.spx-sidebar[data-open]:not([data-closing])) {
+        .spx-app-bar {
+          width: calc(100% - var(--spx-sidebar-width-full));
+        }
+      }
+    }
+  }
+}

packages/browser-utils/src/styles/layout/sidebar.css

@@ -0,0 +1,85 @@
+.spx-sidebar-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--spx-z-sidebar-overlay);
+  width: 100svw;
+  height: 100svh;
+  background-color: transparent;
+
+  &[data-transitioning] {
+    transition-property: background-color;
+    transition-timing-function: var(--spx-sidebar-transition-timing-function);
+    transition-duration: var(--spx-sidebar-transition-duration);
+  }
+
+  &[data-open]:not([data-closing]) {
+    background-color: var(--spx-color-modal-overlay);
+  }
+}
+
+.spx-sidebar {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  max-width: 90svw;
+  z-index: var(--spx-z-sidebar);
+  width: var(--spx-sidebar-width-full);
+  background-color: var(--spx-color-sidebar);
+  box-shadow: var(--spx-shadow-medium);
+  display: flex;
+  flex-direction: column;
+
+  &[data-side='left'] {
+    left: 0;
+  }
+
+  &[data-side='right'] {
+    right: 0;
+  }
+
+  &[data-transitioning] {
+    transition-property: transform;
+    transition-timing-function: var(--spx-sidebar-transition-timing-function);
+    transition-duration: var(--spx-sidebar-transition-duration);
+  }
+}
+
+.spx-sidebar-toolbar {
+  display: flex;
+  flex-direction: row;
+  height: var(--spx-app-bar-height);
+  padding: 4px;
+  gap: 4px;
+
+  > * {
+    flex-grow: 1;
+  }
+}
+
+.spx-sidebar-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 4px;
+  gap: 4px;
+}
+
+.spx-sidebar-nav {
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      a {
+        justify-content: start;
+        flex-grow: 1;
+      }
+    }
+  }
+}

packages/browser-utils/src/styles/modal.css

@@ -3,9 +3,9 @@
   top: 0;
   left: 0;
   z-index: var(--spx-z-modal-overlay);
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  width: 100svw;
+  height: 100svh;
+  background-color: var(--spx-color-modal-overlay);
 }
 
 .spx-modal {

packages/browser-utils/src/styles/text.css

@@ -1,6 +1,7 @@
 html.spx-app {
-  a:not(:has(.spx-button)) {
+  a:not(:has(.spx-button)):not(.spx-button) {
     text-decoration: none;
+    color: var(--spx-color-text-link);
 
     &:visited {
       color: var(--spx-color-text-link);

packages/browser-utils/src/styles/variables.css

@@ -9,6 +9,10 @@
   --spx-control-width-medium: 16rem;
   --spx-control-width-large: 24rem;
 
+  --spx-sidebar-transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+  --spx-sidebar-transition-duration: 500ms;
+  --spx-sidebar-width-full: 300px;
+
   --spx-input-pd-x: 0.75rem;
   --spx-border-width: 1px;
 }

packages/browser-utils/src/themes/default.theme.css

@@ -49,8 +49,11 @@ html *,
   /* App Layout Elements */
   --spx-color-app-bar: var(--spx-color-surface);
   --spx-color-on-app-bar: var(--spx-color-on-surface);
+  --spx-color-modal-overlay: rgba(0, 0, 0, 0.5);
   --spx-color-modal: var(--spx-color-surface);
   --spx-color-on-modal: var(--spx-color-on-surface);
+  --spx-color-sidebar: var(--spx-color-surface);
+  --spx-color-on-sidebar: var(--spx-color-on-surface);
 
   /* Filters */
   --spx-filter-control-hover: brightness(1.25);

packages/solid/package.json

@@ -68,7 +68,8 @@
     "solid-js": "^1.9.0"
   },
   "dependencies": {
-    "@corvu/dialog": "0.2.4"
+    "@corvu/dialog": "0.2.4",
+    "@corvu/drawer": "0.2.3"
   },
   "pnpm": {
     "patchedDependencies": {

packages/solid/src/components/control/button-link/button-link.component.tsx

@@ -0,0 +1,37 @@
+import { JSX, Show, type Component } from 'solid-js';
+import { Icon, IconifyIcon } from '@iconify-icon/solid';
+import { ButtonLinkProps } from './button-link.types';
+import { attributes, classNames } from '@src/main';
+
+/**
+ * A link component that is styled like a button.
+ * @param props - {@link ButtonProps}
+ * @returns The button component.
+ */
+export const ButtonLink: Component<ButtonLinkProps> = (props) => {
+  const { variant = 'contained', color = 'primary', size, rounded } = props;
+
+  return (
+    <a
+      type="button"
+      {...attributes(props)}
+      href={props.href}
+      title={props.title}
+      spx-variant={variant}
+      spx-color={color}
+      spx-size={size || undefined}
+      spx-rounded={rounded || undefined}
+      onClick={props.onClick}
+      {...classNames('spx-button', props.class)}
+    >
+      {/* Icon */}
+      <Show when={typeof props.icon === 'string'}>
+        <Icon icon={props.icon as IconifyIcon} />
+      </Show>
+      <Show when={typeof props.icon === 'object'}>{props.icon as JSX.Element}</Show>
+
+      {/* Content */}
+      {props.children && <span class="spx-button-content">{props.children}</span>}
+    </a>
+  );
+};