diff --git a/pages/hack-school/react.mdx b/pages/hack-school/react.mdx index 97cf76f..a485894 100644 --- a/pages/hack-school/react.mdx +++ b/pages/hack-school/react.mdx @@ -337,3 +337,41 @@ Here's what each part does: ## What is Next.js? Next.js is a framework that makes it easier to build websites with React. It helps you create fast and search-engine-friendly web pages. Next.js takes care of many technical details, like how pages are loaded and how to handle website routing (i.e., moving from one page to another). It also allows you to make parts of your website dynamic while keeping it fast. Check this [reference](https://nextjs.org/learn/basics/create-nextjs-app) to learn more. + +## NPM and Terminal Commands + +Here are some essential commands you'll use when working with React, Next.js, and in the terminal: + +- **`npm run dev`** + Creates a new process running a development build. + *AKA: Runs your code.* + +- **`npm install`** + Installs all external packages necessary to run the project. + +- **`npm run build`** + Builds your project for production. + +- **`npm start`** + Runs your built project in production mode. + +- **`cd folder_name`** + Changes the directory that your terminal is executing commands from. + You can also use `cd ..` to go up one level in the folder structure. + +- **`ls`** + Lists the files in the current directory. + +- **`pwd` / `dir`** + Prints the current working directory (`pwd` on Mac, `dir` on Windows). + +- **`mkdir folder_name`** + Creates a new folder. + +- **`touch file_name`** + Creates a new empty file. + +- **`rm file_name`** + Removes a file. + +These commands will help you navigate, manage files, and run your projects efficiently. diff --git a/src/components/navbar/style.module.css b/src/components/navbar/style.module.css index 10b613b..7927266 100644 --- a/src/components/navbar/style.module.css +++ b/src/components/navbar/style.module.css @@ -106,7 +106,8 @@ overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; - background-color: #111; + /* Default background for navLinks (mobile) */ + background-color: var(--docs-light-bg, #e5e5e560); } .navLinksOpen { @@ -138,3 +139,13 @@ .navLinksOpen li:nth-child(5) { transition-delay: 0.3s; } .navLinksOpen li:nth-child(6) { transition-delay: 0.35s; } } + +/* Light mode for navLinks (mobile) */ +html[class~='light'] .navLinks { + background-color: #fff; +} + +/* Dark mode for navLinks (mobile) */ +html[class~='dark'] .navLinks { + background-color: #111; +}