Skip to content

Commit 4245e3d

Browse files
lazabogdanlazabogdan
committed
sidebar
1 parent f35d3ca commit 4245e3d

12 files changed

+181
-40
lines changed

‎demos/dist/assets/index-fc054c80.css renamed to ‎demos/dist/assets/index-8930ccff.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/dist/assets/index-9ea5d306.js renamed to ‎demos/dist/assets/index-f400a6db.js

+18-18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/dist/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite + React + TS</title>
8-
<script type="module" crossorigin src="/assets/index-9ea5d306.js"></script>
9-
<link rel="stylesheet" href="/assets/index-fc054c80.css">
8+
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
9+
<script type="module" crossorigin src="/assets/index-f400a6db.js"></script>
10+
<link rel="stylesheet" href="/assets/index-8930ccff.css">
1011
</head>
1112
<body>
1213
<div id="root"></div>

‎demos/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite + React + TS</title>
8+
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
89
</head>
910
<body>
1011
<div id="root"></div>

‎demos/package-lock.json

+12-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
"react": "^18.2.0",
1818
"react-bootstrap": "^2.9.1",
1919
"react-dom": "^18.2.0",
20-
"react-router-dom": "^6.17.0"
20+
"react-router-dom": "^6.17.0",
21+
"sidebar-style-guide": "^2.0.0"
2122
},
2223
"devDependencies": {
2324
"@types/react": "^18.2.15",

‎demos/src/App.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import FixedHeader from "./pages/fixed-header";
1212
import BasicHeaderLayout from "./pages/basic-header-layout";
1313
import DrawerLayoutWithHeaderLayout from "./pages/drawer-layout-with-header-layout";
1414
import DrawerLayoutForceNarrow from "./pages/drawer-layout-force-narrow";
15+
import SidebarMenu from "./pages/sidebar-menu";
1516

1617
const router = createBrowserRouter([
1718
{
@@ -50,6 +51,10 @@ const router = createBrowserRouter([
5051
path: "/header-layout",
5152
element: <BasicHeaderLayout />,
5253
},
54+
{
55+
path: "/sidebar-menu",
56+
element: <SidebarMenu />,
57+
},
5358
]);
5459
function App() {
5560
return (

‎demos/src/pages/drawer-layout-content.tsx

+13-14
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,24 @@ import {Link} from "react-router-dom";
99
export const DrawerLayoutContent = ({childRef}: {childRef: RefObject<{ changeVisibility: () => void }>}) => {
1010
return (
1111
<Container>
12-
<div className="d-flex align-items-center mb-1">
12+
<div className="d-flex align-items-center mb-3">
1313
<Button onClick={() => childRef?.current?.changeVisibility()}>
1414
Toggle Drawer
1515
</Button>
1616
<HomeButton className="ms-3"/>
1717
</div>
18-
<Container>
19-
<ListGroup>
20-
<ListGroup.Item>
21-
<Link to="/drawer-layout">Basic Drawer Layout</Link>
22-
</ListGroup.Item>
23-
<ListGroup.Item>
24-
<Link to="/drawer-layout-with-header-layout">Drawer Layout with Header Layout</Link>
25-
</ListGroup.Item>
26-
<ListGroup.Item>
27-
<Link to="/drawer-layout-force-narrow">Drawer Layout Force Narrow</Link>
28-
</ListGroup.Item>
29-
</ListGroup>
30-
</Container>
18+
19+
<ListGroup className="mb-4">
20+
<ListGroup.Item>
21+
<Link to="/drawer-layout">Basic Drawer Layout</Link>
22+
</ListGroup.Item>
23+
<ListGroup.Item>
24+
<Link to="/drawer-layout-with-header-layout">Drawer Layout with Header Layout</Link>
25+
</ListGroup.Item>
26+
<ListGroup.Item>
27+
<Link to="/drawer-layout-force-narrow">Drawer Layout Force Narrow</Link>
28+
</ListGroup.Item>
29+
</ListGroup>
3130

3231
<SampleContent/>
3332
</Container>

‎demos/src/pages/home.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const Home = () => {
1414
<Link to={'/scrolling-header'}>Example of a Scrolling Header</Link>
1515
<Link to={'/fixed-header'}>Example of a Fixed Header</Link>
1616
<Link to={'/header-layout'}>Example of a Header Layout</Link>
17+
<Link to={'/sidebar-menu'}>Example of a Sidebar Menu</Link>
1718
</div>
1819
);
1920
}

‎demos/src/pages/sidebar-menu.tsx

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
//@ts-ignore
2+
import {DrawerLayout} from "fm-react-layout";
3+
import {useRef} from "react";
4+
import DrawerLayoutContent from "./drawer-layout-content";
5+
import "./styles/sidebar-menu.scss";
6+
7+
const BasicDrawerLayout = () => {
8+
const childRef = useRef<{ changeVisibility: () => void }>(null);
9+
10+
return (
11+
<DrawerLayout
12+
ref={childRef}
13+
renderDrawerContent={() => (
14+
<>
15+
<div className="sidebar sidebar-left sidebar-dark bg-dark">
16+
<ul className="sidebar-menu">
17+
<li className="sidebar-menu-item active">
18+
<a href="#" className="sidebar-menu-button">Active menu item</a>
19+
</li>
20+
21+
<li className="sidebar-menu-item">
22+
<a href="#" className="sidebar-menu-button">Regular menu item</a>
23+
</li>
24+
25+
<li className="sidebar-menu-item">
26+
<a className="sidebar-menu-button" href="#">
27+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="sidebar-menu-icon sidebar-menu-icon--left">
28+
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
29+
</svg>
30+
31+
Menu button text
32+
</a>
33+
</li>
34+
35+
<li className="sidebar-menu-item">
36+
<a className="sidebar-menu-button" href="#">
37+
<i className="sidebar-menu-icon sidebar-menu-icon--left material-icons">home</i>
38+
39+
Menu button text
40+
</a>
41+
</li>
42+
43+
<li className="sidebar-menu-item open">
44+
<a href="#" className="sidebar-menu-button">
45+
Dashboard
46+
<span className="sidebar-menu-toggle-icon ms-auto"></span>
47+
</a>
48+
49+
<ul className="sidebar-submenu">
50+
<li className="sidebar-menu-item active">
51+
<a href="#" className="sidebar-menu-button">Active menu item</a>
52+
</li>
53+
<li className="sidebar-menu-item">
54+
<a href="#" className="sidebar-menu-button">Regular menu item</a>
55+
</li>
56+
</ul>
57+
</li>
58+
</ul>
59+
</div>
60+
61+
<div className="sidebar sidebar-left sidebar-light">
62+
<ul className="sidebar-menu">
63+
<li className="sidebar-menu-item active">
64+
<a href="#" className="sidebar-menu-button">Active menu item</a>
65+
</li>
66+
67+
<li className="sidebar-menu-item">
68+
<a href="#" className="sidebar-menu-button">Regular menu item</a>
69+
</li>
70+
71+
<li className="sidebar-menu-item">
72+
<a className="sidebar-menu-button" href="#">
73+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="sidebar-menu-icon sidebar-menu-icon--left">
74+
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
75+
</svg>
76+
77+
Menu button text
78+
</a>
79+
</li>
80+
81+
<li className="sidebar-menu-item">
82+
<a className="sidebar-menu-button" href="#">
83+
<i className="sidebar-menu-icon sidebar-menu-icon--left material-icons">home</i>
84+
85+
Menu button text
86+
</a>
87+
</li>
88+
89+
<li className="sidebar-menu-item open">
90+
<a href="#" className="sidebar-menu-button">
91+
Dashboard
92+
<span className="sidebar-menu-toggle-icon ms-auto"></span>
93+
</a>
94+
95+
<ul className="sidebar-submenu">
96+
<li className="sidebar-menu-item active">
97+
<a href="#" className="sidebar-menu-button">Active menu item</a>
98+
</li>
99+
<li className="sidebar-menu-item">
100+
<a href="#" className="sidebar-menu-button">Regular menu item</a>
101+
</li>
102+
</ul>
103+
</li>
104+
</ul>
105+
</div>
106+
</>
107+
)}>
108+
<DrawerLayoutContent childRef={childRef}/>
109+
</DrawerLayout>
110+
);
111+
}
112+
113+
export default BasicDrawerLayout;

‎demos/src/pages/styles/sidebar-menu.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import 'node_modules/sidebar-style-guide/sass/variables';
2+
@import 'node_modules/sidebar-style-guide/sass/style';
3+
4+
.sidebar-menu-icon {
5+
width: 24px;
6+
height: 24px;
7+
}

‎rollup.config.mjs

+5-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import postcss from "rollup-plugin-postcss";
88
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
99
import livereload from "rollup-plugin-livereload";
1010

11+
const isDevelopment = process.env.NODE_ENV === 'development';
12+
1113
export default [
1214
{
1315
input: 'src/index.ts',
@@ -16,7 +18,7 @@ export default [
1618
file: "dist/cjs/bundle.js",
1719
format: 'cjs',
1820
sourcemap: true,
19-
name: 'fm-react-layout'
21+
name: 'fm-react-layout'
2022
},
2123
{
2224
file: "dist/esm/bundle.js",
@@ -37,8 +39,8 @@ export default [
3739
typescript({ tsconfig: "./tsconfig.json", exclude: ['demos/**'], sourceMap: true }),
3840
postcss(),
3941
terser(),
40-
// livereload('dist'),
41-
],
42+
isDevelopment && livereload('dist'),
43+
].filter(Boolean),
4244
},
4345
{
4446
input: "dist/esm/types/index.d.ts",

0 commit comments

Comments
 (0)