menu.jsx

import { css } from "./style/src/api/index.js"

export default () => (
  <ul
    className={css ({
      body: {
        backgroundColor: "#000"
      },
      backgroundColor: "#1c1c1e",
      borderRadius: 10,
      listStyleType: "none",
      marginLeft: {
        L: 16,
        P: 20
      },
      marginTop: 35,
      maxWidth: {
        L: 336,
        P: 374
      },
      paddingLeft: 0
    })}
  >
    {["Airplane Mode", "Wi-Fi", "Bluetooth", "Cellular", "Personal Hotspot Personal Hotspot Pe"].map((label, i) => (
      <li
        className={css ({
          ":focus-within": {
            zIndex: 1
          },
          ":not(:first-child)": {
            borderTop: "1px solid #3d3d41",
          },
          display: "flex",
          // backgroundColor: "#00f",
          flexDirection: "row",
          marginLeft: 64,
          position: "relative",
          zIndex: 0
        })}
        key={i}
      >
        <a
          className={css ({
            ":focus": {
              borderRadius: 4,
              boxShadow: "0 0 0 2px #fff",
              outline: "none"
            },
            alignItems: "center",
            // backgroundColor: "#f00",
            backgroundImage: "url('/icon.png')",
            backgroundPosition: "20px 50%",
            backgroundRepeat: "no-repeat",
            backgroundSize: 29,
            borderRadius: 10,
            color: "#fff",
            display: "flex",
            flexDirection: "row",
            fontSize: 17,
            marginLeft: -64,
            // maxWidth: "calc(100% + 20px)",
            paddingBottom: 12,
            paddingLeft: 64,
            paddingRight: 14,
            paddingTop: 12,
            textDecoration: "none",
            width: "calc(100% + 64px)"
          })}
          href={label}
          tabIndex={0}
        >
          <span
            className={css ({
              // backgroundColor: "#0f0",
              display: "inline-block",
              flexGrow: 1,
              marginRight: 6,
              overflowX: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
              // width: "calc(100% - 20px)"
            })}
          >
            {label}
          </span>
          {/* <span
            className={css ({
              color: "#98989e",
              marginRight: 5
            })}
          >
            Independence
          </span> */}
          <svg
            className={css ({
              minHeight: 20,
              minWidth: 20
            })}
            viewBox="0 0 120 120"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="8">
              {/* <path d="M77 30L48 60l29 30" stroke="#996"/>
              <path d="M30 77l30-29 30 29" stroke="#999"/>
              <path d="M30 42l30 30 30-30" stroke="#699"/> */}
              <path d="M42 30l30 30-30 30" stroke="#5a5a5e"/>
            </g>
          </svg>
        </a>
          {/* <svg
            className={css ({
              // backgroundColor: "#ff0",
              height: 20,
              margin: 12,
              minHeight: 20,
              minWidth: 20,
              width: 20
            })}
            viewBox="0 0 120 120"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
              <path d="M77 30L48 60l29 30" stroke="#996"/>
              <path d="M30 77l30-29 30 29" stroke="#999"/>
              <path d="M30 42l30 30 30-30" stroke="#699"/>
              <path d="M42 30l30 30-30 30" stroke="#5a5a5e"/>
            </g>
          </svg> */}
      </li>
    ))}
  </ul>
)