@isthatuzii/create-nano-app/templates/solid-js/src/template-ui/components/layout/TopMenuBar.jsx

Desktop application scaffolding tool for the Nano Framework

import { createSignal, onMount } from "solid-js";
import { Home, Menu, Info } from "lucide-solid";
import "./TopMenuBar.css";
import { createTopMenuBarFunctions } from "./TopMenuBar.functions.js";

function TopMenuBar(props) {
  const [state, setState] = createSignal({
    activeMenu: null
  });

  const functions = createTopMenuBarFunctions(
    state,
    setState,
    props
  );

  onMount(() => {
    functions.initialize();
  });

  return (
    <div class="top-menu-bar">
      <div class="menu-items">
        <div 
          class="menu-item"
          onClick={() => functions.handleMenuClick('home')}
          classList={{ active: state().activeMenu === 'home' }}
        >
          <Home class="icon size-sm" />
          <span>Home</span>
        </div>
        
        <div 
          class="menu-item"
          onClick={() => functions.handleMenuClick('nano')}
          classList={{ active: state().activeMenu === 'nano' }}
        >
          <Menu class="icon size-sm" />
          <span>Nano</span>
        </div>
        
        <div 
          class="menu-item"
          onClick={() => functions.handleMenuClick('about')}
          classList={{ active: state().activeMenu === 'about' }}
        >
          <Info class="icon size-sm" />
          <span>About</span>
        </div>
      </div>
      
      <div class="menu-spacer"></div>
      
      <div class="app-title">
        Nano Framework
      </div>
    </div>
  );
}

export default TopMenuBar;