header-react-ui - npm Package Compare versions

Comparing version 0.0.10 to 0.1.0

dist/cjs/index.js

@@ -212,3 +212,3 @@ 'use strict';
 
-var css_248z = ".logo {\n  color: black;\n  max-width: 600px;\n  overflow: hidden;\n}\n\n@media (max-width: 768px) {\n  .logo {\n    max-width: 400px;\n  }\n}\n@media (max-width: 420px) {\n  .logo {\n    max-width: 200px;\n  }\n}\nbody {\n  font-family: Arial, Helvetica, sans-serif;\n  width: 100%;\n  color: #000000;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  margin: 0;\n  padding: 0;\n}\n\na {\n  text-decoration: none;\n  color: #000000;\n}\n\nul {\n  list-style: none;\n}\n\n.header {\n  width: 100%;\n  max-width: 1400px;\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0 10px;\n}\n@media (max-width: 768px) {\n  .header {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n}\n\n.deskTopNav {\n  display: flex;\n  height: 204px;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 23px;\n}\n@media (max-width: 768px) {\n  .deskTopNav {\n    display: none;\n  }\n}\n\n.deskTopUl {\n  display: flex;\n  gap: 19px;\n  align-items: center;\n  list-style: none;\n}\n\n.mobileNav {\n  display: none;\n  gap: 66px;\n}\n@media (max-width: 768px) {\n  .mobileNav {\n    display: block;\n  }\n}\n\n.mobileNavBlock {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.hamburger {\n  z-index: 100;\n}\n\n.mobileNavMenu {\n  width: 100%;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  background-color: #a5a4a4;\n  height: 100vh;\n  transform: translateY(-100%);\n}\n\n.showMenu {\n  transform: translateY(0%);\n}\n\n.hiedMenu {\n  transform: translateY(-100%);\n}\n\n.mobileNavUl {\n  padding: 0;\n  font-size: 23px;\n  font-weight: normal;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 60px;\n}";
+var css_248z = ".logo {\n  color: black;\n  max-width: 600px;\n  overflow: hidden;\n}\n\n@media (max-width: 768px) {\n  .logo {\n    max-width: 400px;\n  }\n}\n@media (max-width: 420px) {\n  .logo {\n    max-width: 200px;\n  }\n}\nbody {\n  font-family: Arial, Helvetica, sans-serif;\n  width: 100%;\n  color: #000000;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  margin: 0;\n  padding: 0;\n}\n\na {\n  text-decoration: none;\n  color: #000000;\n}\n\nul {\n  list-style: none;\n}\n\n.header {\n  padding-top: 0;\n  width: 100%;\n  max-width: 1400px;\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0 10px;\n}\n@media (max-width: 768px) {\n  .header {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n}\n\n.deskTopNav {\n  display: flex;\n  height: 204px;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 23px;\n}\n@media (max-width: 768px) {\n  .deskTopNav {\n    display: none;\n  }\n}\n\n.deskTopUl {\n  display: flex;\n  gap: 19px;\n  align-items: center;\n  list-style: none;\n}\n\n.mobileNav {\n  display: none;\n  gap: 66px;\n}\n@media (max-width: 768px) {\n  .mobileNav {\n    display: block;\n  }\n}\n\n.mobileNavBlock {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.hamburger {\n  z-index: 100;\n}\n\n.mobileNavMenu {\n  width: 100%;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  background-color: #a5a4a4;\n  height: 100vh;\n  transform: translateY(-100%);\n}\n\n.showMenu {\n  transform: translateY(0%);\n}\n\n.hiedMenu {\n  transform: translateY(-100%);\n}\n\n.mobileNavUl {\n  padding: 0;\n  font-size: 23px;\n  font-weight: normal;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 60px;\n}";
 styleInject(css_248z);
@@ -236,3 +236,6 @@
     return (React__default["default"].createElement("header", { className: "header" },
-        React__default["default"].createElement("nav", { className: "deskTopNav" },
+        React__default["default"].createElement("nav", { className: "deskTopNav", style: {
+                maxHeight: props.maxHeight ? props.maxHeight + "px" : "100px",
+                backgroundColor: props.bgColor ? props.bgColor : "",
+            } },
             React__default["default"].createElement("div", { className: "logo" }, props.logo),
@@ -246,3 +249,6 @@ React__default["default"].createElement("ul", { className: "deskTopUl" }, links.map(function (link, id) { return (React__default["default"].createElement("li", { className: "deskTopLi", key: id },
                     React__default["default"].createElement(Squash, { toggled: navbarOpen, toggle: setNavbarOpen, duration: 0.3, easing: "ease-in", color: "#000000" }))),
-            React__default["default"].createElement("div", { className: "mobileNavMenu ".concat(navbarOpen ? "showMenu" : "hideMenu"), style: { transition: "transform 0.3s ease-in-out" } },
+            React__default["default"].createElement("div", { className: "mobileNavMenu ".concat(navbarOpen ? "showMenu" : "hideMenu"), style: {
+                    transition: "transform 0.3s ease-in-out",
+                    backgroundColor: props.bgMobile ? props.bgMobile : "",
+                } },
                 React__default["default"].createElement("ul", { className: "mobileNavUl" }, links.map(function (link, id) { return (React__default["default"].createElement("li", { key: id },
@@ -249,0 +255,0 @@ React__default["default"].createElement("a", { href: link.link, onClick: handleLinkClick }, link.name))); }))))));

dist/cjs/types/components/NavBarDefault/NavBarDefault.d.ts

@@ -5,4 +5,7 @@ import React from "react";
     logo: React.ReactNode;
+    maxHeight?: number;
+    bgColor?: string;
+    bgMobile?: string;
 }
 declare const NavbarDefault: (props: Props) => JSX.Element;
 export default NavbarDefault;

dist/cjs/types/components/NavBarDefault/NavBarDefault.stories.d.ts

@@ -6,1 +6,7 @@ import { Story, Meta } from "@storybook/react";
 export declare const Default: Story<Props>;
+export declare const NoProps: Story<Props>;
+export declare const NoLogo: Story<Props>;
+export declare const NoMaxHeight: Story<Props>;
+export declare const NoBgColor: Story<Props>;
+export declare const BigHeight: Story<Props>;
+export declare const BgMobile: Story<Props>;

dist/esm/index.js

@@ -204,3 +204,3 @@ import React, { useState, useEffect } from 'react';
 
-var css_248z = ".logo {\n  color: black;\n  max-width: 600px;\n  overflow: hidden;\n}\n\n@media (max-width: 768px) {\n  .logo {\n    max-width: 400px;\n  }\n}\n@media (max-width: 420px) {\n  .logo {\n    max-width: 200px;\n  }\n}\nbody {\n  font-family: Arial, Helvetica, sans-serif;\n  width: 100%;\n  color: #000000;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  margin: 0;\n  padding: 0;\n}\n\na {\n  text-decoration: none;\n  color: #000000;\n}\n\nul {\n  list-style: none;\n}\n\n.header {\n  width: 100%;\n  max-width: 1400px;\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0 10px;\n}\n@media (max-width: 768px) {\n  .header {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n}\n\n.deskTopNav {\n  display: flex;\n  height: 204px;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 23px;\n}\n@media (max-width: 768px) {\n  .deskTopNav {\n    display: none;\n  }\n}\n\n.deskTopUl {\n  display: flex;\n  gap: 19px;\n  align-items: center;\n  list-style: none;\n}\n\n.mobileNav {\n  display: none;\n  gap: 66px;\n}\n@media (max-width: 768px) {\n  .mobileNav {\n    display: block;\n  }\n}\n\n.mobileNavBlock {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.hamburger {\n  z-index: 100;\n}\n\n.mobileNavMenu {\n  width: 100%;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  background-color: #a5a4a4;\n  height: 100vh;\n  transform: translateY(-100%);\n}\n\n.showMenu {\n  transform: translateY(0%);\n}\n\n.hiedMenu {\n  transform: translateY(-100%);\n}\n\n.mobileNavUl {\n  padding: 0;\n  font-size: 23px;\n  font-weight: normal;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 60px;\n}";
+var css_248z = ".logo {\n  color: black;\n  max-width: 600px;\n  overflow: hidden;\n}\n\n@media (max-width: 768px) {\n  .logo {\n    max-width: 400px;\n  }\n}\n@media (max-width: 420px) {\n  .logo {\n    max-width: 200px;\n  }\n}\nbody {\n  font-family: Arial, Helvetica, sans-serif;\n  width: 100%;\n  color: #000000;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  margin: 0;\n  padding: 0;\n}\n\na {\n  text-decoration: none;\n  color: #000000;\n}\n\nul {\n  list-style: none;\n}\n\n.header {\n  padding-top: 0;\n  width: 100%;\n  max-width: 1400px;\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0 10px;\n}\n@media (max-width: 768px) {\n  .header {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n}\n\n.deskTopNav {\n  display: flex;\n  height: 204px;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 23px;\n}\n@media (max-width: 768px) {\n  .deskTopNav {\n    display: none;\n  }\n}\n\n.deskTopUl {\n  display: flex;\n  gap: 19px;\n  align-items: center;\n  list-style: none;\n}\n\n.mobileNav {\n  display: none;\n  gap: 66px;\n}\n@media (max-width: 768px) {\n  .mobileNav {\n    display: block;\n  }\n}\n\n.mobileNavBlock {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.hamburger {\n  z-index: 100;\n}\n\n.mobileNavMenu {\n  width: 100%;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  background-color: #a5a4a4;\n  height: 100vh;\n  transform: translateY(-100%);\n}\n\n.showMenu {\n  transform: translateY(0%);\n}\n\n.hiedMenu {\n  transform: translateY(-100%);\n}\n\n.mobileNavUl {\n  padding: 0;\n  font-size: 23px;\n  font-weight: normal;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 60px;\n}";
 styleInject(css_248z);
@@ -228,3 +228,6 @@
     return (React.createElement("header", { className: "header" },
-        React.createElement("nav", { className: "deskTopNav" },
+        React.createElement("nav", { className: "deskTopNav", style: {
+                maxHeight: props.maxHeight ? props.maxHeight + "px" : "100px",
+                backgroundColor: props.bgColor ? props.bgColor : "",
+            } },
             React.createElement("div", { className: "logo" }, props.logo),
@@ -238,3 +241,6 @@ React.createElement("ul", { className: "deskTopUl" }, links.map(function (link, id) { return (React.createElement("li", { className: "deskTopLi", key: id },
                     React.createElement(Squash, { toggled: navbarOpen, toggle: setNavbarOpen, duration: 0.3, easing: "ease-in", color: "#000000" }))),
-            React.createElement("div", { className: "mobileNavMenu ".concat(navbarOpen ? "showMenu" : "hideMenu"), style: { transition: "transform 0.3s ease-in-out" } },
+            React.createElement("div", { className: "mobileNavMenu ".concat(navbarOpen ? "showMenu" : "hideMenu"), style: {
+                    transition: "transform 0.3s ease-in-out",
+                    backgroundColor: props.bgMobile ? props.bgMobile : "",
+                } },
                 React.createElement("ul", { className: "mobileNavUl" }, links.map(function (link, id) { return (React.createElement("li", { key: id },
@@ -241,0 +247,0 @@ React.createElement("a", { href: link.link, onClick: handleLinkClick }, link.name))); }))))));

dist/esm/types/components/NavBarDefault/NavBarDefault.d.ts

@@ -5,4 +5,7 @@ import React from "react";
     logo: React.ReactNode;
+    maxHeight?: number;
+    bgColor?: string;
+    bgMobile?: string;
 }
 declare const NavbarDefault: (props: Props) => JSX.Element;
 export default NavbarDefault;

dist/esm/types/components/NavBarDefault/NavBarDefault.stories.d.ts

@@ -6,1 +6,7 @@ import { Story, Meta } from "@storybook/react";
 export declare const Default: Story<Props>;
+export declare const NoProps: Story<Props>;
+export declare const NoLogo: Story<Props>;
+export declare const NoMaxHeight: Story<Props>;
+export declare const NoBgColor: Story<Props>;
+export declare const BigHeight: Story<Props>;
+export declare const BgMobile: Story<Props>;

dist/index.d.ts

@@ -11,2 +11,5 @@ /// <reference types="react" />
     logo: React.ReactNode;
+    maxHeight?: number;
+    bgColor?: string;
+    bgMobile?: string;
 }
@@ -13,0 +16,0 @@ declare const NavbarDefault: (props: Props) => JSX.Element;

package.json

 {
   "name": "header-react-ui",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "A react ui library with functional headers",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -31,9 +31,3 @@ # React Header Ui Library
 const App = () => {
-  return (
-    <NavBarDefault
-      logo="https://i.imgur.com/9IwJW2u.png"
-      logoAlt="logo"
-      logoLink=""
-    />
-  );
+  return <NavBarDefault logo={<div>Your Logo Here</div>} />;
 };
@@ -44,6 +38,22 @@
 
-## Props:
+## Props
 
-| Prop Name | Type | Default Value | Description |
+Each component accepts a set of props that allow you to customize its behavior and appearance. Here's a list of available props for each component:
 
+### ComponentName
+
+| Prop Name | Type        | Default Value               | Description                                     |
+| --------- | ----------- | --------------------------- | ----------------------------------------------- |
+| `logo`    | `ReactNode` | `<div>Your Logo Here</div>` | Logo displayed on the left side of the sidebar. |
+
+**Example:**
+
+```jsx
+import { ComponentName } from "your-react-ui-library";
+const logo = <div>Your Logo Here</div>;
+function App() {
+  return <NavBarDefault logo={logo} />;
+}
+```
+
 ## Contributing:
@@ -57,1 +67,5 @@
 [MIT](https://choosealicense.com/licenses/mit/)
+
+```
+
+```

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75624

increased by3.4%

Lines of code

679

increased by5.11%

Number of lines in readme file

69

increased by25.45%

No dependency changes