Skip to content

Commit 39ea9f2

Browse files
MaximilianPfitzenmaierMaximilianPfitzenmaier
committed
init dropdown
1 parent 89b2898 commit 39ea9f2

23 files changed

Lines changed: 361 additions & 668 deletions

‎README.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
# React Dropdown menu template
1+
# React Dropdown Menu Template
2+
3+
The React Dropdown Menu Component Template provides an easy-to-use and customizable dropdown menu solution for React applications. This template offers a fully functional dropdown menu as a reusable component that can be integrated into any React project with minimal effort. It is designed to enhance user experience by providing a sleek and intuitive menu interface.
4+
5+
The dropdown menu template supports various features, including multi-selection, search-interaction, responsive design, and customizable styles. Developers can easily modify the appearance, behavior, and content of the dropdown menu to suit their project requirements. The template provides a robust and flexible foundation, allowing developers to save time and effort by leveraging pre-built functionality.
26

37
## Live Demo:
48

5-
https://fourier-sampling.vercel.app/
9+
https://dropdown-menu-component-react.vercel.app/
610

711
## :electric_plug: Preparation
812

@@ -33,3 +37,6 @@ Using the latest LTS version of node.js should work just fine: https://nodejs.or
3337
### Done!
3438

3539
You should now be able to reach your site.
40+
41+
Keywords: React dropdown menu, Customizable menu component, User-friendly dropdown menu, Reusable dropdown template, React menu interface, Dropdown menu solution, Easy integration with React
42+
https://github.com/MaximilianPfitzenmaier/

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<meta name="robots" content="all" />
88
<meta name="googlebot" content="all" />
9-
<title>Sampling Application</title>
9+
<title>Dropdown Menu Template</title>
1010
</head>
1111
<body>
1212
<div id="root"></div>

‎public/favicon.svg‎

Whitespace-only changes.

‎public/robots.txt‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎public/sitemap.xml‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/App.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1+
/* eslint linebreak-style: ["error", "windows"]*/
12
// import React
23
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
34

45
// import Components
5-
// import Footer from './components/Footer';
66
import Header from './components/Header';
7+
import Footer from './components/Footer';
8+
9+
// import pages
710
import Home from './pages/Home';
8-
import Sampling from './pages/Sampling';
911

1012
// import styling
1113
import './assets/scss/default.scss';
1214

13-
1415
/**
1516
* The App
16-
* @return {App} The sum of the two numbers.
17+
* @return {App}
1718
*/
1819
const App = () => {
1920
return (
@@ -24,10 +25,9 @@ const App = () => {
2425
<div className="container">
2526
<Routes>
2627
<Route path="/" element={<Home />} />
27-
<Route path="/sampling" element={<Sampling />} />
2828
</Routes>
2929
</div>
30-
{/* <Footer /> */}
30+
<Footer />
3131
</Router>
3232
</div>
3333
</>

‎src/assets/data/data.jsx‎

Lines changed: 7 additions & 21 deletions
Large diffs are not rendered by default.

‎src/assets/images/logo.jpg‎

-60.9 KB
Binary file not shown.

‎src/assets/scss/default.scss‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
// Small tablets (portrait view)
2+
$screen-md-min: 768px;
3+
4+
// Medium devices
5+
@mixin md {
6+
@media (min-width: #{$screen-md-min}) {
7+
@content;
8+
}
9+
}
10+
111
@font-face {
212
font-family: 'roboto-regular';
313
src: url('../fonts/Roboto-Regular.ttf');
@@ -20,7 +30,7 @@
2030
--color-links-hover: hsl(var(--hs-links) 45%);
2131
--color-border: hsl(277, 85%, 38%);
2232
--color-invalid: hsl(356, 100%, 71%);
23-
--color-font: #212529;
33+
--color-font: hsl(210, 11%, 15%);
2434
--gradient-background: radial-gradient(circle, rgba(152, 11, 238, 1) 0%, rgba(118, 15, 181, 1) 35%, rgba(58, 13, 85, 1) 100%);
2535
--font-body: -apple-system, 'Segoe UI', Helvetica Neue, Helvetica, Roboto, Arial, sans-serif, system-ui, 'Apple Color Emoji', 'Segoe UI Emoji';
2636
--font-display: roboto-regular, var(--font-body);
@@ -143,6 +153,20 @@ h6 {
143153
}
144154
}
145155

156+
.row {
157+
display: flex;
158+
flex-direction: column;
159+
160+
@include md {
161+
flex-direction: row;
162+
}
163+
164+
}
165+
166+
.mt-3 {
167+
margin-top: 3rem;
168+
}
169+
146170
// lists
147171
ul,
148172
ol {
@@ -152,4 +176,4 @@ ol {
152176
li::marker {
153177
content: none;
154178
}
155-
}
179+
}

‎src/assets/scss/dropdown.scss‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
.dropdown {
2+
&--container {
3+
text-align: left;
4+
border: 1px solid #ccc;
5+
position: relative;
6+
border-radius: 5px;
7+
}
8+
9+
&--input {
10+
padding: 5px;
11+
display: flex;
12+
align-items: center;
13+
justify-content: space-between;
14+
user-select: none;
15+
cursor: pointer;
16+
17+
svg {
18+
transition: all .4s;
19+
}
20+
21+
&.open svg {
22+
transform: rotate(180deg);
23+
}
24+
}
25+
26+
&--menu {
27+
position: absolute;
28+
transform: translateY(4px);
29+
width: 100%;
30+
border: 1px solid #ccc;
31+
border-radius: 5px;
32+
overflow: auto;
33+
max-height: 150px;
34+
background-color: #fff;
35+
z-index: 99;
36+
37+
.search-box {
38+
padding: 5px;
39+
background-color: #eee;
40+
41+
input {
42+
width: 100%;
43+
box-sizing: border-box;
44+
padding: 5px;
45+
border: 1px solid #ccc;
46+
border-radius: 5px;
47+
}
48+
}
49+
}
50+
51+
&--item {
52+
padding: 5px;
53+
cursor: pointer;
54+
}
55+
56+
&--item:hover {
57+
background-color: #9fc3f870;
58+
}
59+
60+
&--item.selected {
61+
background-color: #0d6efd;
62+
color: #fff;
63+
}
64+
65+
&--tags {
66+
display: flex;
67+
flex-wrap: wrap;
68+
gap: 5px;
69+
}
70+
71+
&--tag-item {
72+
background-color: #ddd;
73+
padding: 2px 4px;
74+
border-radius: 2px;
75+
display: flex;
76+
align-items: center;
77+
78+
&:hover {
79+
cursor: pointer;
80+
}
81+
}
82+
83+
&--tag-close {
84+
display: flex;
85+
align-items: center;
86+
}
87+
88+
}

0 commit comments

Comments
 (0)