Minimal Sidebar

'use client';

import LogoWithGalaxy from '../LogoWithGalaxy';
import './MinimalSidebar.css';

/** MinimalSidebar — ported from astro-component-kit. */
export interface MinimalSidebarProps {
}

export function MinimalSidebar({}: MinimalSidebarProps) {
  return (
    <>
      <aside className="sidebar" data-rk-9276eb="">
        <div className="sidebar-logo" data-rk-9276eb="">
          <LogoWithGalaxy size="small" />
        </div>
        <nav className="sidebar-nav" data-rk-9276eb="">
          <a href="#" className="active" data-rk-9276eb="">Overview</a>
          <a href="#" data-rk-9276eb="">Projects</a>
          <a href="#" data-rk-9276eb="">Team</a>
          <a href="#" data-rk-9276eb="">Settings</a>
        </nav>
      </aside>
    </>
  );
}

export default MinimalSidebar;

/* MinimalSidebar — ported from astro-component-kit (navigation/MinimalSidebar.astro) */

.sidebar:where([data-rk-9276eb]) { width: 260px; height: 100vh; background: #080b14; border-right: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; }
.sidebar-logo:where([data-rk-9276eb]) { width: 100%; display: flex; align-items: center; justify-content: center; }
.sidebar-nav:where([data-rk-9276eb]) { display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-nav:where([data-rk-9276eb]) a:where([data-rk-9276eb]) { padding: 0.75rem 1rem; border-radius: 10px; color: #94a3b8; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: 0.2s; }
.sidebar-nav:where([data-rk-9276eb]) a:hover:where([data-rk-9276eb]), .sidebar-nav:where([data-rk-9276eb]) a.active:where([data-rk-9276eb]) { background: rgba(255,255,255,0.05); color: #fff; }