testingloah6 v1.2.2

Loah | لوح

Custom App Navigation Component

Install

npm install --save @sikka/loah

Props

Usage

import React, { useState } from "react"
import AccountCircleIcon from "@mui/icons-material/AccountCircle"
import { Loah } from "@sikka/loah"
import "@sikka/loah/dist/index.css" //Still in progress

const buttons = [
  {
    name: "button1",
    icon: <AccountCircleIcon />,
    action: () => {
      //Do something when button1 is clicked
    },
  },
  // {name: String, icon: Component, action: Function}
]

const Example = () => {
  return (
    <Loah
      bgColor={"red"}
      textColor={"blue"}
      direction={"right"}
      buttons={buttons}
    />
  )
}

Contributing

To contribute, clone this github repository and run the development server

• clone repository

git clone git@github.com:sikka-software/loah.git
cd loah
npm install

TESTING

• Run development server

git clone git@github.com:sikka-software/loah.git
cd loah
npm install
npm run storybook

• Edit loah/src/stories/Loah.stories.js file

• Add your custom testing component in Loah.stories.js file

import React, { useState } from "react"
import { storiesOf } from "@storybook/react"
import { Loah } from "../components/Loah/Loah"

const stories = storiesOf("App Test", module)

// Your code goes here

stories.add("App", () => {
  const [expand, setExpand] = useState(false)

  const buttons = [
    {
      name: "something",
    },
    {
      name: "something",
    },
    {
      name: "something",
    },
  ]

  return (
    <Loah
      expended={expand}
      handleExpand={() => setExpand(!expand)}
      bgColor={"red"}
      direction={"right"}
      buttons={buttons}
    />
  )
})

License

MIT © SIKKA SOFTWARE