사이드바가 있는 react-app - 로고만
react router ref
npx create-react-app name
cd name
code .
npm i @emailjs/browser
npm i @fortawesome/free-brands-svg-icons
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome
npm i animate.css
npm i gsap-trial
npm i loader.css
npm i react-leaflet
npm i react-loaders
npm i react-router-dom
npm i sass
사스
.scss
.scss 가져오기
더 예쁘다
.prettierrc
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
App.scss
$primary-color: #ffd700;
@import 'animate.css';
@font-face {
font-family: 'Helvetica Neue';
src: url('./assets/fonts/helvetica-neu.ttf') format('ttf');
}
@font-face {
font-family: 'La Belle Aurore';
src: url('./assets/fonts/LaBelleAurore.woff2') format('woff2');
}
@font-face {
font-family: 'Coolvetica';
src: url('./assets/fonts/CoolveticaRg-Regular.woff2') format('woff2');
}
input,
textarea {
font-family: 'Helvetica Neue';
}
index.scss
html {
font-size: 62.5%;
}
body {
margin: 0;
font-family: 300 11px/1.4 'Helvetica Neue', 'sans-serif';
color: #444;
background: #022c43;
overflow: hidden;
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
index.js
import { BrowserRouter } from 'react-router-dom'
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
src/components/Sidebar/index.js
import { Link } from 'react-router-dom'
import './index.scss'
import LogoS from '../../assets/images/logo-s.png'
import LogoSubtitle from '../../assets/images/logo_sub.png'
const Sidebar = () => (
<div className="nav-bar">
<Link className="logo" to="/">
<img src={LogoS} alt="logo" />
<img src={LogoSubtitle} alt="slobodan" />
</Link>
</div>
)
export default Sidebar
src/components/Sidebar/index.scss
.nav-bar {
background: #181818;
width: 60px;
height: 100%;
position: absolute;
top: 0;
z-index: 3;
min-height: 500px;
.logo {
display: block;
padding: 8px 0;
img {
display: block;
margin: 8px auto;
width: 24px;
}
}
}
src/components/Layout/index.js
import Sidebar from '../Sidebar'
import './index.scss'
const Layout = () => {
return (
<>
<Sidebar />
</>
)
}
export default Layout
Reference
이 문제에 관하여(사이드바가 있는 react-app - 로고만), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tejan/react-app-i0c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)