Added MenuContext for handling navigation
This commit is contained in:
@@ -10,7 +10,7 @@ import postcssNesting from 'postcss-nesting';
|
|||||||
import postcssPresetEnv from 'postcss-preset-env';
|
import postcssPresetEnv from 'postcss-preset-env';
|
||||||
import postcssUtilities from 'postcss-utilities';
|
import postcssUtilities from 'postcss-utilities';
|
||||||
import postcssFunctions from 'postcss-functions';
|
import postcssFunctions from 'postcss-functions';
|
||||||
import customFunctions from './src/postcss/functions';
|
import customFunctions from './src/lib/postcss/functions';
|
||||||
|
|
||||||
const plugins = [
|
const plugins = [
|
||||||
postcssGlobalData({
|
postcssGlobalData({
|
||||||
|
|||||||
@@ -1,532 +1,12 @@
|
|||||||
import styles from './page.module.css';
|
import styles from './page.module.css';
|
||||||
|
import { MenuProvider } from '@/contexts/MenuContext';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.content}>
|
<MenuProvider>
|
||||||
<h1>Rods pursued studies dearer dangers Mellon spears lodgings.</h1>
|
|
||||||
<p>
|
<p>
|
||||||
Language Sméagol where? Forest cesspits talked reclaim verse dungeon
|
DAVE! DAVE! Do Not Let Us Die In The Dark Night Of This Cold Winter!
|
||||||
Envenom 60 then venerable prolonging! There is only one Lord of the
|
|
||||||
Ring.
|
|
||||||
</p>
|
</p>
|
||||||
<h2>Breeding job clothing talks caught Freda trust.</h2>
|
</MenuProvider>
|
||||||
<p>
|
|
||||||
East dry because slinker deeper quarry knocks Sit. Treachery Front whim.
|
|
||||||
Even the smallest person can change the course of the future.
|
|
||||||
</p>
|
|
||||||
<h3>Fence Toby reaction greed fired parting!</h3>
|
|
||||||
<p>
|
|
||||||
Do not take me for some conjurer of cheap tricks. Room aged Hobbitses!
|
|
||||||
Wall odds force simply shield hmm Tuckborough pearl privilege grows.
|
|
||||||
Ride amazing seeps lake guardian pretty Arwen retrieve stroke steps?
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
Primary Equipment Loadout - Every adventurer must carry essential gear
|
|
||||||
including weapons, armor, survival tools, and emergency supplies that
|
|
||||||
could mean the difference between life and death in the depths of
|
|
||||||
forgotten dungeons and abandoned ruins.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Weapon Categories and Combat Applications
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
Melee Weapons - Close combat instruments ranging from simple clubs
|
|
||||||
and daggers to sophisticated swords and war hammers, each designed
|
|
||||||
for specific tactical situations and requiring different skill
|
|
||||||
sets to master effectively.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Ranged Weapons and Projectile Systems
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
Bows and Crossbows - Traditional projectile weapons that rely
|
|
||||||
on mechanical tension to launch arrows and bolts with deadly
|
|
||||||
accuracy across considerable distances, favored by hunters and
|
|
||||||
scouts.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Firearms and Explosive Devices
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
Pistols - Compact handheld firearms suitable for
|
|
||||||
close-quarters combat and as backup weapons when primary
|
|
||||||
armaments fail or become unusable in tight spaces.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Rifles - Long-barreled precision weapons designed for
|
|
||||||
accuracy at extended ranges, ideal for eliminating threats
|
|
||||||
before they can close to melee distance.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Heavy Weapons - Devastating armaments including cannons,
|
|
||||||
siege engines, and experimental warpstone-powered devices
|
|
||||||
that can breach fortifications and eliminate multiple
|
|
||||||
enemies.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Thrown Weapons - Projectiles designed for manual deployment
|
|
||||||
including knives, axes, and specialized implements that
|
|
||||||
require significant skill and practice to use effectively in
|
|
||||||
combat situations.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Magic Items and Enchanted Artifacts - Supernatural implements that
|
|
||||||
harness arcane energies to produce effects beyond the capabilities
|
|
||||||
of mundane equipment, often requiring specific knowledge or
|
|
||||||
bloodlines to activate safely.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Protective Gear and Defensive Equipment - Armor systems, shields, and
|
|
||||||
other defensive measures designed to reduce incoming damage and
|
|
||||||
improve survival chances against the horrors that lurk in the darkness
|
|
||||||
below.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li>Helm's Deep saws rip outer special bowl determined.</li>
|
|
||||||
<li>
|
|
||||||
Breached forgive Hornblowers galumphing drums respectable wretched.
|
|
||||||
</li>
|
|
||||||
<li>Mellon slightest uttermost Isildur's sakes em.</li>
|
|
||||||
<li>Degree bone rift where sleep judgment Mordor.</li>
|
|
||||||
<li>
|
|
||||||
Tickle watchful lightest dry very teaching pushes picking Shire root.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Maggot devils tea resisted person Sauron the White mist.</h3>
|
|
||||||
<p>
|
|
||||||
You shall not pass! Pelennor squash least crunchable feel faithless
|
|
||||||
years well-done fun. Rock ending almost shared extend crooked alliances
|
|
||||||
possible nightfall Dwarf fine risky.
|
|
||||||
</p>
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
Character Creation Process - The systematic approach to developing a
|
|
||||||
playable character including attribute generation, skill selection,
|
|
||||||
equipment procurement, and background development that establishes the
|
|
||||||
foundation for all future adventures.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Combat Rules and Tactical Systems
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
Initiative Phase Determination - The method by which turn order is
|
|
||||||
established at the beginning of combat encounters, typically
|
|
||||||
involving dice rolls modified by relevant characteristics and
|
|
||||||
environmental factors.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Action Resolution Mechanics and Probability Systems
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
Roll percentile dice against relevant skill values - The core
|
|
||||||
mechanic requiring players to generate random numbers between
|
|
||||||
1 and 100 and compare the result to their character's
|
|
||||||
applicable skill rating.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Compare results to skill values and apply situational
|
|
||||||
modifiers
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
Success conditions require rolling under the target skill
|
|
||||||
value after applying all relevant bonuses and penalties
|
|
||||||
from equipment, positioning, and environmental conditions.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Failure occurs when the dice result exceeds the modified
|
|
||||||
skill value, resulting in missed attacks, failed attempts,
|
|
||||||
or other negative outcomes depending on the specific
|
|
||||||
action attempted.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Critical results happen on natural rolls of 01-05 for
|
|
||||||
automatic success or 96-00 for catastrophic failure,
|
|
||||||
regardless of skill levels or modifiers applied to the
|
|
||||||
attempt.
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Apply environmental modifiers, equipment bonuses, and
|
|
||||||
situational penalties that reflect the current tactical
|
|
||||||
situation and the character's preparation level for the
|
|
||||||
specific challenge being attempted.
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Damage Resolution and Wound Tracking - The system for determining
|
|
||||||
injury severity, applying armor protection values, and tracking
|
|
||||||
the cumulative effects of combat damage on character performance
|
|
||||||
and survival.
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Experience and Advancement Systems - The mechanisms by which
|
|
||||||
characters improve their capabilities over time through successful
|
|
||||||
completion of adventures, skill usage, and deliberate training between
|
|
||||||
expeditions.
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
<ol>
|
|
||||||
<li>Spent begins Saruman become interrupt thing arts wide.</li>
|
|
||||||
<li>Barad-dûr gives forest worm closer.</li>
|
|
||||||
<li>
|
|
||||||
Comings mission province Haleth character chill special service?
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Fine mean hours triumph loyal jelly league someone's raze
|
|
||||||
Bagshot!
|
|
||||||
</li>
|
|
||||||
<li>Bars ostler crack spreads should spring too dissuade s World.</li>
|
|
||||||
</ol>
|
|
||||||
<h3>Else ah Bolger torment minutes hours.</h3>
|
|
||||||
<p>
|
|
||||||
Possibly Moon effect utterly tipsy overcrowd next misplaced? Covet
|
|
||||||
parting Brandybuck hungers crevice hours pork haven't tempted
|
|
||||||
clothing. All right, then. Keep your secrets.
|
|
||||||
</p>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th></th>
|
|
||||||
<th>Unfold</th>
|
|
||||||
<th>Grumbling</th>
|
|
||||||
<th>Ago</th>
|
|
||||||
<th>Lifetime</th>
|
|
||||||
<th>Pillaged</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Lad</td>
|
|
||||||
<td>whip</td>
|
|
||||||
<td>arrows</td>
|
|
||||||
<td>fairer</td>
|
|
||||||
<td>begged</td>
|
|
||||||
<td>stabs</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Appreciation</td>
|
|
||||||
<td>trouble-making</td>
|
|
||||||
<td>alone</td>
|
|
||||||
<td>horrid</td>
|
|
||||||
<td>prove</td>
|
|
||||||
<td>they'll</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Filthy</td>
|
|
||||||
<td>tombs</td>
|
|
||||||
<td>vest</td>
|
|
||||||
<td>torches</td>
|
|
||||||
<td>barrels</td>
|
|
||||||
<td>powerful</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Instead</td>
|
|
||||||
<td>foretold</td>
|
|
||||||
<td>ranks</td>
|
|
||||||
<td>stare</td>
|
|
||||||
<td>joy</td>
|
|
||||||
<td>unequaled</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Knew</td>
|
|
||||||
<td>relations</td>
|
|
||||||
<td>fighting</td>
|
|
||||||
<td>spirits</td>
|
|
||||||
<td>gongs</td>
|
|
||||||
<td>bears</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Seasoning</td>
|
|
||||||
<td>nut</td>
|
|
||||||
<td>one's</td>
|
|
||||||
<td>approve</td>
|
|
||||||
<td>gray</td>
|
|
||||||
<td>blessing</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td>beheading</td>
|
|
||||||
<td>disturber</td>
|
|
||||||
<td>laid</td>
|
|
||||||
<td>forth</td>
|
|
||||||
<td>watching</td>
|
|
||||||
<td>domains</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
<h4>Sodding tongue Elros leaves perceived south pocket.</h4>
|
|
||||||
<p>
|
|
||||||
Born revenge utterly that'll Goblin-town gladness. Chips sustained
|
|
||||||
times apocalypse closest Alfrid grow. I can cut across country easily
|
|
||||||
enough. Clearing toss unhappy Smeagol's gifted?
|
|
||||||
</p>
|
|
||||||
<blockquote>
|
|
||||||
<p>Sam... I'm glad you are with me.</p>
|
|
||||||
<footer>
|
|
||||||
—Ravens, <cite>shore wizards skin harpoon</cite>
|
|
||||||
</footer>
|
|
||||||
</blockquote>
|
|
||||||
<figure>
|
|
||||||
<figure>
|
|
||||||
<img
|
|
||||||
src="https://picsum.photos/1280/1024"
|
|
||||||
alt="Industrial machinery in abandoned factory"
|
|
||||||
width="1280"
|
|
||||||
height="1024"
|
|
||||||
/>
|
|
||||||
<figcaption>
|
|
||||||
Rusted conveyor systems in the former Blackwater Manufacturing
|
|
||||||
plant, photographed during demolition in 2023.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<blockquote>
|
|
||||||
<p>
|
|
||||||
More glad painted Sauron the White troop holidays captive has. Many
|
|
||||||
pierced repel bathroom absence glimpse Tom. All right, then. Keep
|
|
||||||
your secrets.
|
|
||||||
</p>
|
|
||||||
</blockquote>
|
|
||||||
<figcaption>
|
|
||||||
Common saying among veteran adventurers in the Undercity.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<details>
|
|
||||||
<summary>Equipment Requirements</summary>
|
|
||||||
<p>
|
|
||||||
All adventurers must carry a minimum of: one weapon (melee or ranged),
|
|
||||||
basic armor or protective gear, emergency rations for 3 days, torch or
|
|
||||||
light source, 50 feet of rope, and a first aid kit.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Optional but recommended: lockpicks, crowbar, grappling hook, healing
|
|
||||||
potions, and backup weapon.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Combat Mechanics Overview</summary>
|
|
||||||
<h4>Initiative System</h4>
|
|
||||||
<p>Roll 1d10 + Initiative characteristic. Highest goes first.</p>
|
|
||||||
|
|
||||||
<h4>Attack Resolution</h4>
|
|
||||||
<p>
|
|
||||||
Roll percentile dice under your relevant skill. Success means you hit,
|
|
||||||
failure means you miss.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>Melee combat uses Weapon Skill</li>
|
|
||||||
<li>Ranged combat uses Ballistic Skill</li>
|
|
||||||
<li>Damage equals weapon damage + Strength bonus</li>
|
|
||||||
</ul>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details open>
|
|
||||||
<summary>Currently Expanded Section</summary>
|
|
||||||
<p>
|
|
||||||
This details element starts open to test the expanded state styling.
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
<h5>
|
|
||||||
Raised Morgoth powerless roaming sing fire-breather regurgitation was.
|
|
||||||
</h5>
|
|
||||||
<p>
|
|
||||||
More glad painted Sauron the White troop holidays captive has. Many
|
|
||||||
pierced repel bathroom absence glimpse Tom. All right, then. Keep your
|
|
||||||
secrets.
|
|
||||||
</p>
|
|
||||||
<pre>
|
|
||||||
Prepared Tilda adventure characters crush. Wilds overlook blessed walk
|
|
||||||
requested. Ligulas sat eavesdropping breathes exceeding dim. Deeper
|
|
||||||
clever becomes regain Dimholt fronts.
|
|
||||||
</pre>
|
|
||||||
<h6>Resilient closest regret vile birthright innards Middle-earth.</h6>
|
|
||||||
<p>
|
|
||||||
Shire herald <strong>dear hard army carry without</strong> proposition.
|
|
||||||
Thranduil faint me chiefest{' '}
|
|
||||||
<a>middle hey-diddle-diddle squeaked sawed landlord</a>.{' '}
|
|
||||||
<del>Hallway clot-head's injury</del> journey Minas Morgul hasty?
|
|
||||||
Ring sight fit Boffins <kbd>S</kbd>. Manage Bifur ways{' '}
|
|
||||||
<mark>pity's swarming</mark> doubt. Wilderness breathing woe liege
|
|
||||||
<ins>Khazad-dum King's</ins> handy! Join corpses{' '}
|
|
||||||
<code>rack tongs knockers gongs</code> four-day Théoden's idiot.{' '}
|
|
||||||
<var>Hooded</var> Kingsfoil biding may. Extra{' '}
|
|
||||||
<time>Radagast the Brown</time> passion cutting skinned. Hurry problem{' '}
|
|
||||||
<sup>delays</sup> Bucklebury. Corks hell <small>hundred deal</small>{' '}
|
|
||||||
Barahir unprepared. What'll Dwarvish down
|
|
||||||
<em>bought haunted steps</em>. Master's given Hobbit{' '}
|
|
||||||
<dfn>afterwards bodies gibbet</dfn>. Towers stars <sub>productive</sub>{' '}
|
|
||||||
Baggins. Juicy <samp>opinion note</samp> Déagol tough books spreads.
|
|
||||||
Decide imaginable <q>Goblin-mutant Silvan</q> fellow.{' '}
|
|
||||||
<cite>Sit Agreed</cite> thick drink pearl tale. Legolas approve
|
|
||||||
night's
|
|
||||||
<abbr>retrieve</abbr> endless.
|
|
||||||
</p>
|
|
||||||
<hr />
|
|
||||||
<dl>
|
|
||||||
<dt>How</dt>
|
|
||||||
<dd>
|
|
||||||
Looks resilient eggs Tauriel higher supplant evisceration idiot
|
|
||||||
barely.
|
|
||||||
</dd>
|
|
||||||
<dt>Names</dt>
|
|
||||||
<dd>Slugs play Dwalin late parapet ending how morning?</dd>
|
|
||||||
<dd>
|
|
||||||
Holidays even disease thunder-battle nice irregular cooked
|
|
||||||
trouble'll Minas Tirith mistaken!
|
|
||||||
</dd>
|
|
||||||
<dt>Mice</dt>
|
|
||||||
<dd>
|
|
||||||
Productive Sit mend ones raiding hutch couldn't thirty-four.
|
|
||||||
</dd>
|
|
||||||
<dd>
|
|
||||||
Facing others act doing lives usually pity Legolas laws daughter.
|
|
||||||
</dd>
|
|
||||||
<dd>
|
|
||||||
Lords embalmed nature we'd grievances Thror shelter tragedy.
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
<form>
|
|
||||||
<fieldset>
|
|
||||||
<legend>Need bandy council</legend>
|
|
||||||
<div>
|
|
||||||
<label>Text</label>
|
|
||||||
<input type="text" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Email</label>
|
|
||||||
<input type="email" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Password</label>
|
|
||||||
<input type="password" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Url</label>
|
|
||||||
<input type="url" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Number</label>
|
|
||||||
<input type="number" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Tel</label>
|
|
||||||
<input type="tel" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Search</label>
|
|
||||||
<input type="search" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Time</label>
|
|
||||||
<input type="time" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Date</label>
|
|
||||||
<input type="date" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Datetime-local</label>
|
|
||||||
<input type="datetime-local" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Week</label>
|
|
||||||
<input type="week" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Textarea</label>
|
|
||||||
<textarea></textarea>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset>
|
|
||||||
<legend>Wring moments</legend>
|
|
||||||
<div>
|
|
||||||
<label>Month</label>
|
|
||||||
<input type="month" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" name="checkbox" />
|
|
||||||
tipsy smuggler
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Color</label>
|
|
||||||
<input type="color" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>File</label>
|
|
||||||
<input type="file" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Hidden</label>
|
|
||||||
<input type="hidden" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Image</label>
|
|
||||||
<input type="image" src="https://picsum.photos/96" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>malt grass fall door's infested red</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="radio" />
|
|
||||||
rain joy
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="radio" />
|
|
||||||
plates grieve
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="radio" />
|
|
||||||
arranged listened
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label>Range</label>
|
|
||||||
<input type="range" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<input type="button" value="Button" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<input type="reset" value="Reset" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<input type="submit" value="Submit" />
|
|
||||||
</div>
|
|
||||||
<button>infected awoke</button>
|
|
||||||
<div>
|
|
||||||
<label>Select</label>
|
|
||||||
<select>
|
|
||||||
<optgroup label="rubbish waited tastes">
|
|
||||||
<option>myth</option>
|
|
||||||
<option>metals</option>
|
|
||||||
<option>would</option>
|
|
||||||
</optgroup>
|
|
||||||
<optgroup label="thunderstorm particularly breach">
|
|
||||||
<option>began</option>
|
|
||||||
<option>threads</option>
|
|
||||||
<option>tight</option>
|
|
||||||
</optgroup>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
61
src/contexts/MenuContext.tsx
Normal file
61
src/contexts/MenuContext.tsx
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { useContext, useEffect } from 'react';
|
||||||
|
|
||||||
|
interface MenuContextType {
|
||||||
|
isMenuOpen: boolean;
|
||||||
|
toggleMenu: () => void;
|
||||||
|
closeMenu: () => void;
|
||||||
|
openMenu: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MenuContext = React.createContext<MenuContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
interface MenuProviderProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MenuProvider = ({ children }: MenuProviderProps) => {
|
||||||
|
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
|
||||||
|
|
||||||
|
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
|
||||||
|
const closeMenu = () => setIsMenuOpen(false);
|
||||||
|
const openMenu = () => setIsMenuOpen(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isMenuOpen) {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = 'unset';
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = 'unset';
|
||||||
|
};
|
||||||
|
}, [isMenuOpen]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleEscape = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape' && isMenuOpen) {
|
||||||
|
closeMenu();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', handleEscape);
|
||||||
|
return () => document.removeEventListener('keydown', handleEscape);
|
||||||
|
}, [isMenuOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MenuContext.Provider
|
||||||
|
value={{ isMenuOpen, toggleMenu, openMenu, closeMenu }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</MenuContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useMenu = () => {
|
||||||
|
const context = useContext(MenuContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useMenu must be used within a MenuProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user