Skip to content

Commit

Permalink
Update header css
Browse files Browse the repository at this point in the history
  • Loading branch information
@s1sds28
s1sds28 committed Feb 28, 2024
1 parent 761f340 commit ff4ab11
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 156 deletions.
107 changes: 48 additions & 59 deletions apps/frontend/src/app/components/header/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
left: 0;
transition: 650ms;
z-index: 999;
color: black;
color: black;
}

.HideSidebarNav {
Expand All @@ -26,36 +26,32 @@
}

.SidebarWrap {
width: 100%;
width: 100%;
}

.header-container {
display: flex;
justify-content: center;
width: 100%;
justify-content: center;
}



.trademark-image {
.trademark-image,
.trademark-letter {
font-size: large;
color: white;
}

.trademark-letter {
font-size: large;
color: white;
margin-top: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
}

.vertical-line {
position: relative;
display: flex;
}

.vertical-line::before {
content: ' ';
position: absolute;
Expand All @@ -65,18 +61,12 @@
width: 1px;
background-color: rgb(255, 255, 255);
}

.head-trademark-lineList {
margin-top: 0.40rem;
width: 1.25rem;
}







.navLink-list {
display: flex;
justify-content: space-around;
Expand Down Expand Up @@ -118,56 +108,55 @@
justify-content: center;
gap: 1rem;
height: 10rem;
}

}

.head-trademark-letter {
font-size: 1.5rem;
color: white;
padding: 0px;
margin: 0px;
bottom: 0px;
padding: 0;
margin: 0;
bottom: 0;
}

}

.head-trademark-symbol {
.head-trademark-symbol {
width: 1.55rem;
height: 1.55rem;
padding: 0px;
margin: 0px;

}

.head-vertical-line {
position: relative;
display: flex;

}

.head-vertical-line::before {
content: '';
position: absolute;
top: 0rem;
bottom: 0rem;
left: 0.02rem;
width: 1px;
background-color: rgb(255, 255, 255);
}

.head-crystalball {
padding: 0;
margin: 0;
}

.head-vertical-line {
position: relative;
display: flex;
}

.head-vertical-line::before {
content: '';
position: absolute;
top: 0.35rem;
bottom: 0.25rem;
left: 0.02rem;
width: 1px;
background-color: rgb(255, 255, 255);
}

.head-crystalball {
width: 1.95rem;
height: 1.95rem;
padding: 0px;
margin: 0px;

padding: 0;
margin: 0;
padding-left: 0.5rem;
}
}

ul {
margin: 0;
.unordered-list {
justify-content: space-around;
width: 100%;
display: flex;
flex-direction: row;
margin-right: auto;
padding: 0;
}
ul.li {
margin-right: 0px;
}
}

ul li {
margin-right: 0;
}
183 changes: 86 additions & 97 deletions apps/frontend/src/app/components/header/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,116 +81,105 @@ export default function Header() {
return classes.filter(Boolean).join(' ');
}

return (
return (
<header className="py-5 bg-white lg:bg-black">
<nav className="relative z-50 flex justify-center">
<div className="flex w-full flex-wrap items-center justify-start px-3">
<button
onClick={toggleSidebar}
className="border-0 bg-transparent px-2 text-xl leading-none Transition-shadow duration-150 ease-in-out lg:hidden"
type="button"
data-te-collapse-init
data-te-target="#navbarSupportedContentY"
aria-controls="navbarSupportedContentY"
aria-expanded="false"
aria-label="Toggle navigation"
>
<img
src={hamburger_menu}
alt="Hamburger Menu"
className="w-10 h-10"
/>
onClick={toggleSidebar}
className="border-0 bg-transparent px-2 text-xl leading-none Transition-shadow duration-150 ease-in-out lg:hidden"
type="button"
data-te-collapse-init
data-te-target="#navbarSupportedContentY"
aria-controls="navbarSupportedContentY"
aria-expanded="false"
aria-label="Toggle navigation"
>
<img
src={hamburger_menu}
alt="Hamburger Menu"
className="w-10 h-10"
/>
</button>
<div onClick={toggleSidebar} className='lg:hidden'>
<HamburgerNav
show={showSidebar}
/>
<div onClick={toggleSidebar} className="lg:hidden">
<HamburgerNav show={showSidebar} />
</div>
<div
className="header-container"
id="navbarSupportedContentY"
data-te-collapse-item
>

className="header-container"
id="navbarSupportedContentY"
data-te-collapse-item
>
<div
className="!visible hidden grow basis-[100%] items-center lg:!flex lg:basis-auto ml-7 justify-around w-full"
id="navbarSupportedContentY"
data-te-collapse-item>
<ul className="mr-auto flex flex-col lg:flex-row justify-around w-full">
<li>
<div className="head-tradmark-container flex pr-10">
<div id="W" className="trademark-letter">
W
</div>
<img src={lineList} alt="lineList" id="lineList" className="head-trademark-lineList" />
<div id="L" className="trademark-letter">
L
</div>
<div className="head-vertical-line">
" "
<img
src={crystalBall}
alt="CrystalBall"
id="CrystalBall"
className="mb-0 mt-1"
/>
</div>
</div>
</li>
<li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
<NavLink
className="block lg:p-2"
to='/dashboard'
>
Dashboard
data-te-collapse-item
>
<ul className="unordered-list">
<li>
<div className="head-tradmark-container flex pr-10">
<div id="W" className="trademark-letter">
W
</div>
<img
src={lineList}
alt="lineList"
id="lineList"
className="head-trademark-lineList"
/>
<div id="L" className="trademark-letter">
L
</div>
<div className="head-vertical-line">
" "
<img
src={crystalBall}
alt="CrystalBall"
id="CrystalBall"
className="mb-0 mt-1"
/>
</div>
</div>
</li>
<li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
<NavLink className="block lg:p-2" to="/dashboard">
Dashboard
</NavLink>
</li>
<li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
<NavLink
className="block lg:p-2"
to="/cashflow"
>
Cash Flow
</NavLink>
</li>
<li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
<NavLink
className="block lg:p-2"
to="/assets"
>
Assets
</NavLink>
</li>
<li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
<NavLink
className="block lg:p-2"
to="/liabilities"
>
Liabilities
</NavLink>
</li>
<li>
<button
id="FirstTimeUserBTN"
className='header-first-time-user-text pr-10'
>
First Time User?
</button>
</li>
<li>
<img
src={hankHill}
alt="Frame2"
className='head-profile-image'
/>
</li>
</ul>
</div>


</li>
<li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
<NavLink className="block lg:p-2" to="/cashflow">
Cash Flow
</NavLink>
</li>
<li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
<NavLink className="block lg:p-2" to="/assets">
Assets
</NavLink>
</li>
<li className="hover:underline mb-4 lg:mb-0 lg:pr-2 text-white font-bold">
<NavLink className="block lg:p-2" to="/liabilities">
Liabilities
</NavLink>
</li>
<li>
<button
id="FirstTimeUserBTN"
className="header-first-time-user-text pr-10"
>
First Time User?
</button>
</li>
<li>
<img
src={hankHill}
alt="Frame2"
className="head-profile-image"
/>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
)
);
}

0 comments on commit ff4ab11

Please sign in to comment.