client/src/components/Sidebar.js - master - petrhlam/project_moon

client/src/components/Sidebar.js
95 строк7 KB
Andrey Sukhikh
Added new python service
19 май 2025, 20:30
19 май 2025, 20:30aced71a
import React, { useState } from "react";
// import { NavLink, useLocation } from "react-router-dom";
import { NavLink } from "react-router-dom";

const menuItems = [
  {
    path: "/",
    label: "База",
    icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" className="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z" />
          </svg>
  },
  {
    path: "/spectral",
    label: "Участки луны",
    icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
          </svg>
  },
  {
    path: "/spectralobr",
    label: "Спектральный анализ",
    icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="w-6 h-6" fill="currentColor">
    <path d="M9.002 110.422c4.661 0 8.44-3.778 8.44-8.44V8.44c0-4.662-3.779-8.44-8.44-8.44s-8.44 3.778-8.44 8.44v93.543c0 4.66 3.778 8.439 8.44 8.439zM502.998 495.121h-69.249l-59.617-397.91c-.619-4.132-4.168-7.189-8.346-7.189s-7.727 3.057-8.346 7.189l-24.443 163.148c-.691 4.61 2.487 8.907 7.096 9.596 4.613.693 8.907-2.486 9.597-7.096l16.096-107.44 50.896 339.701H306.9l30.593-204.191c.691-4.61-2.487-8.907-7.096-9.596-4.614-.69-8.905 2.486-9.596 7.096l-12.797 85.408-25.797-110.627c-.891-3.82-4.296-6.523-8.219-6.523s-7.328 2.703-8.219 6.523l-27.892 119.613-37.743-195.936c-.765-3.972-4.242-6.843-8.288-6.843s-7.522 2.871-8.288 6.843l-24.867 129.096c-.881 4.576 2.114 9.002 6.691 9.883 4.574.886 9.001-2.113 9.883-6.69l16.58-86.075 36.616 190.09-16.772 71.928h-70.316l13.06-67.796 14.901-77.351c.881-4.576-2.114-9.002-6.691-9.883-4.573-.886-9.002 2.113-9.883 6.69l-7.4 38.417-26.289-128.648c-.891-3.82-4.296-6.523-8.219-6.523s-7.328 2.703-8.219 6.523L54.388 495.121H17.442v-359.38c0-4.662-3.779-8.44-8.44-8.44s-8.44 3.778-8.44 8.44v367.82c0 4.662 3.779 8.44 8.44 8.44h485.556c4.661 0 8.44-3.778 8.44-8.44s-3.779-8.44-8.44-8.44z"/>
  </svg>
  },
  {
    path: "/izolinii",
    label: "Изолинии",
    icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="w-6 h-6" fill="currentColor">
      <path  d="M478.679 226.691c-31.649 0-60.946 19.093-80.381 52.383l-.004.006c-8.907 15.252-20.189 23.999-30.954 23.999c-10.769 0-22.052-8.75-30.958-24.006l-.014-.023c-19.435-33.276-48.726-52.36-80.368-52.36c-31.649 0-60.947 19.093-80.381 52.382c-8.907 15.257-20.19 24.007-30.958 24.007c-10.768 0-22.052-8.75-30.958-24.007c-19.435-33.289-48.732-52.382-80.381-52.382c-15.803 0-28.614 12.811-28.614 28.614s12.811 28.614 28.614 28.614c10.768 0 22.052 8.75 30.958 24.007c19.435 33.289 48.732 52.382 80.381 52.382c31.648 0 60.946-19.093 80.381-52.382c8.907-15.257 20.19-24.007 30.958-24.007c10.766 0 22.048 8.747 30.954 23.999l.004.006c19.435 33.29 48.732 52.383 80.382 52.383c31.644 0 60.939-19.088 80.373-52.369l.008-.013c8.906-15.256 20.189-24.006 30.957-24.006c15.803 0 28.614-12.812 28.614-28.614c.001-15.802-12.811-28.613-28.613-28.613z"></path>
  </svg>
  },
  // {
  //   path: "/authorization",
  //   label: "Авторизация",
  //   icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
  //           <path strokeLinecap="round" strokeLinejoin="round" d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6 M10.6666 11.3333L14 8.00001L10.6666 4.66667 M14 8H6" />
  //         </svg>
  // },
  // {
  //   path: "/test",
  //   label: "Тест",
  //   icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
  //           <path strokeLinecap="round" strokeLinejoin="round" d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6 M10.6666 11.3333L14 8.00001L10.6666 4.66667 M14 8H6" />
  //         </svg>
  // },
];

const Sidebar = () => {
  // const location = useLocation();
  const [collapsed, setCollapsed] = useState(true);

  const toggleSidebar = () => setCollapsed(!collapsed);

  return (
    <aside
      className={`bg-white border-r transition-all duration-300 ease-in-out shadow-sm ${
        collapsed ? "w-16" : "w-64"
      } min-h-screen`}
    >
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-4 border-b overflow-hidden">
        <button onClick={toggleSidebar} className="text-gray-700 hover:text-black">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-6 h-6">
            <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
        </button>
        <h1 className={`font-semibold whitespace-nowrap transition ease-out duration-100 ${collapsed ? "opacity-0" : "opacity-100"}`}>
          🌙 Moon project
        </h1>
      </div>

      {/* Navigation */}
      <nav className="px-2 py-4 flex flex-col gap-2">
        {menuItems.map(({ path, label, icon }) => (
          <NavLink
            key={path}
            to={path}
            className={({ isActive }) =>
              `flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                isActive ? "bg-gray-200 text-black" : "text-gray-700 hover:bg-gray-100"
              }`
            }
          >
            <span className="shrink-0">{icon}</span>
            {!collapsed && <span className="whitespace-nowrap">{label}</span>}
          </NavLink>
        ))}
      </nav>
    </aside>
  );
};

export default Sidebar;