Skip to content

sikka-software/loah

Repository files navigation

Loah | لوح

Custom App Navigation Component

NPM NPM JavaScript Style Guide

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 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}
    />
  )
})

Publishing (Admin)

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

License

MIT © SIKKA SOFTWARE

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published