README.md

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