Sidebar bugs fixed (#106)
* responsive pages * removed comments * fixed bugs regarding css * responsive dashboard * sidebar bugs fixed
This commit is contained in:
Tejas
GitHub
parent
705c3c5c8d
commit
f9d737169d
|
|
@ -15,39 +15,13 @@ function toggleSidebar1(e) {
|
|||
sidebar.classList.toggle('toggle_sidebar')
|
||||
}
|
||||
|
||||
function changePageContent(e){
|
||||
// change contents of the page according to the option selected by user.
|
||||
|
||||
toggleSidebar1(e);
|
||||
}
|
||||
|
||||
function Sidebar1() {
|
||||
return (<div className="sidebar">
|
||||
<ul>
|
||||
<div className="nav-item mb-2 brand-name"><h1>Brand Name</h1></div>
|
||||
<div className="profile">
|
||||
<div className="profile-image"><img
|
||||
src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg"/>
|
||||
</div>
|
||||
<p className="name">Hayat</p>
|
||||
<p className="profession">Product Designer</p>
|
||||
</div>
|
||||
<div className="creatButton">
|
||||
<button className={""}>Create Link</button>
|
||||
</div>
|
||||
<li className="nav-buttons">
|
||||
<div className="nav-item">
|
||||
<button>
|
||||
<Link href="./dashboard">Overview</Link>
|
||||
</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>
|
||||
<Link href="./myLinks">My Links</Link>
|
||||
</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>
|
||||
Extras
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>)
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<CloseIcon className="close_icon" onClick={toggleSidebar1} />
|
||||
|
|
@ -64,23 +38,22 @@ function Sidebar1() {
|
|||
<p className="profession">Product Designer</p>
|
||||
</div>
|
||||
<div className="creatButton">
|
||||
<button className={''}>Create Link</button>
|
||||
<button>Create Link</button>
|
||||
</div>
|
||||
<li className="nav-buttons">
|
||||
<div className="nav-item">
|
||||
<button>Overview</button>
|
||||
<button onClick={changePageContent}>Overview</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>My Links</button>
|
||||
<button onClick={changePageContent}>My Links</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>Extras</button>
|
||||
<button onClick={changePageContent}>Extras</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
main
|
||||
}
|
||||
|
||||
function Sidebar2() {
|
||||
|
|
@ -201,6 +174,7 @@ function Graph() {
|
|||
</div>
|
||||
<div className="title">Total Views</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,17 +2,18 @@ import styled from 'styled-components'
|
|||
|
||||
export default styled.div`
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
@media (max-width: 1100px) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* this shows sidebar when menu icon is clicked */
|
||||
.toggle_sidebar {
|
||||
@media (max-width: 1100px) {
|
||||
left: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex-shrink: 0;
|
||||
padding-top: 60px;
|
||||
|
|
@ -21,15 +22,18 @@ export default styled.div`
|
|||
height: 100%;
|
||||
color: white !important;
|
||||
transition: all 0.25s;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
left: -300px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* for small screens */
|
||||
@media (max-width: 300px) {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
margin-top: 40px;
|
||||
padding-left: 20px;
|
||||
|
|
@ -77,9 +81,11 @@ export default styled.div`
|
|||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.close_icon {
|
||||
display: none;
|
||||
font-size: 2rem;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -110,11 +116,13 @@ export default styled.div`
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 90px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.row2 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
@ -122,12 +130,15 @@ export default styled.div`
|
|||
align-items: center;
|
||||
padding: 20px 40px;
|
||||
justify-content: space-evenly;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.graph {
|
||||
border-radius: 10px;
|
||||
border: 3px solid #e1e1e1;
|
||||
|
|
@ -135,9 +146,11 @@ export default styled.div`
|
|||
padding: 15px;
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: clamp(200px, 500px, 90vw);
|
||||
}
|
||||
|
|
@ -149,10 +162,12 @@ export default styled.div`
|
|||
padding: 15px;
|
||||
width: 30%;
|
||||
min-width: 250px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin: 20px 0;
|
||||
width: clamp(200px, 500px, 90vw);
|
||||
}
|
||||
|
||||
.version {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -180,16 +195,19 @@ export default styled.div`
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar2 {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
|
||||
.hamburger_icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 1rem;
|
||||
display: none;
|
||||
font-size: 3rem;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -204,11 +222,13 @@ export default styled.div`
|
|||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
overflow-x: auto;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 30%;
|
||||
height: 250px;
|
||||
|
|
@ -217,4 +237,4 @@ export default styled.div`
|
|||
margin-bottom: 10px;
|
||||
list-style-type: none;
|
||||
}
|
||||
`
|
||||
`
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@ function HomeSection(props) {
|
|||
</div>
|
||||
</motion.span>
|
||||
<motion.div initial={{ x: '-100vw', opacity: 0 }} animate={{ x: 0, opacity: 1, transition: { delay: 3, type: 'spring', stiffness: 150 } }} className={styles.searchBox}>
|
||||
|
||||
<input
|
||||
className={styles.search}
|
||||
placeholder="Enter the url to be minified......"
|
||||
|
|
@ -143,6 +144,7 @@ function HomeSection(props) {
|
|||
MINIFY
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<div className={styles.info} style={{ marginBottom: '40px', color: 'black', fontWeight: 'bold', fontSize: '1rem' }}>
|
||||
<motion.h3 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0, transition: { delay: 3.4, duration: 0.4 } }}>
|
||||
Need more advanced features? |{' '}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
width: 90vw;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
|
||||
.showUrl {
|
||||
width: 90vw;
|
||||
}
|
||||
|
|
@ -73,4 +73,4 @@
|
|||
width: 90vw;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -100,6 +100,7 @@
|
|||
dependencies:
|
||||
"@babel/helper-plugin-utils" "^7.16.7"
|
||||
|
||||
|
||||
"@babel/runtime@^7.13.10", "@babel/runtime@^7.13.16", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
|
||||
version "7.17.2"
|
||||
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz"
|
||||
|
|
@ -174,6 +175,7 @@
|
|||
resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
|
||||
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
|
||||
|
||||
|
||||
"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8":
|
||||
version "0.8.8"
|
||||
resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz"
|
||||
|
|
@ -520,6 +522,7 @@
|
|||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
|
||||
"@types/react@*", "@types/react@>=16.14.8", "@types/react@>=16.9.11":
|
||||
version "17.0.38"
|
||||
resolved "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz"
|
||||
|
|
@ -534,6 +537,7 @@
|
|||
resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
|
||||
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
|
||||
|
||||
|
||||
"@types/warning@^3.0.0":
|
||||
version "3.0.0"
|
||||
resolved "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz"
|
||||
|
|
@ -598,6 +602,7 @@ babel-plugin-macros@^2.6.1:
|
|||
dependencies:
|
||||
"@babel/helper-annotate-as-pure" "^7.16.0"
|
||||
"@babel/helper-module-imports" "^7.16.0"
|
||||
|
||||
babel-plugin-syntax-jsx "^6.18.0"
|
||||
lodash "^4.17.11"
|
||||
|
||||
|
|
@ -1056,6 +1061,7 @@ next@12.0.9:
|
|||
"@next/swc-win32-ia32-msvc" "12.0.9"
|
||||
"@next/swc-win32-x64-msvc" "12.0.9"
|
||||
|
||||
|
||||
node-fetch@^1.0.1:
|
||||
version "1.7.3"
|
||||
resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue