Loah | لوح

Custom App Navigation Component

Install

npm install --save @sikka/loah

Props

| Prop | Type | Default | Purpose | | ------------ | :-----: | :-------------: | -----------------------------------------: | | buttons | Array | empty array [] | The list of buttons | | bgColor | String | 'lightgrey' | The background color of the bar | | textColor | String | 'black' | | | direction | String | 'right' | | | showAvatar | Boolean | false | | | versionLabel | String | empty string "" | | | activeItem | String | empty string "" | The slug name of the current selected item |

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 [email protected]:sikka-software/loah.git
cd loah
npm install

TESTING

• Run development server

git clone [email protected]: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}
    />
  )
})

Publishing (Admin)

npm version [major | minor | patch]
npm run build-lib
npm publish --access public

License

MIT © SIKKA SOFTWARE