sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Merge pull request 'header rewrite start' (#42) from YasinOnm08/interstellar_ai:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/42
This commit is contained in:
Patrick 2024-09-25 11:23:58 +02:00
commit 22227808c8
6 changed files with 47 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/components/Header.tsx
View file

@ -17,6 +17,11 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
setMenuOpen(!menuOpen)
}
const buttonClicked = (page: "AI" | "Documentation" | "FAQ") => {
onViewChange(page)
toggleMenu()
}
return (
<>
<header>
@ -26,18 +31,20 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
<span></span>
</div>
<nav className={`nav-links ${menuOpen ? "active":""}`}>
<button onClick={() => onViewChange('FAQ')} className="nav-btn">FAQ</button>
<button onClick={() => onViewChange('Documentation')} className="nav-btn">Documentation</button>
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
{showToggle && showHistoryModelsToggle && (
<button onClick={toggleDivs} className="nav-btn">
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
</button>
)}
</nav>
{/* <button onClick={() => onViewChange('AI')} className="header-button header-logo">
<img src="/img/logo.png" alt="logo" className="header-logo" />
</button> */}
<Login />
<button onClick={() => onViewChange('AI')} className="header-button header-logo">
<p>1</p>
</button>
<div className="login-button">
<Login />
</div>
</header>
</>
);

9
app/components/Login.tsx
View file

@ -52,11 +52,10 @@ const Login: React.FC = () => {
return (
<div>
{/* Login or Settings Button */}
<div className="login-button">
<button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
{isLoggedIn ? 'Settings' : 'Log In'}
</button>
</div>
<button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
{isLoggedIn ? 'Settings' : 'Log In'}
</button>
{/* Conditional rendering of the Login Popup */}
{showLoginPopup && (

31
app/styles/Login.css
View file

@ -1,34 +1,3 @@
/* Container for the login layout */
.login-container {
display: grid;
grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
grid-auto-flow: column;
overflow-x: hidden;
height: 100%; /* Ensure it takes full height */
}
/* Button for login action */
.login-button {
position: absolute;
top: 5px;
right: 10px;
z-index: 9999; /* Highest z-index for the login button */
margin: 1px;
}
.login-button button {
padding: 10px 20px;
background-color: var(--input-button-color);
color: var(--text-color);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.login-button button:hover {
background-color: var(--input-button-hover-color);
}
/* Overlay for popup - full screen and centered */
.popup-overlay {

96
app/styles/header.css
View file

@ -1,93 +1,29 @@
header {
background-color: var(--header-background-color); /* Use the new header background color */
color: var(--header-text-color); /* Use the new header text color */
width: 100%;
text-decoration: none;
position: fixed;
header{
position: absolute;
padding: 0 20px;
top: 0;
left: 0;
padding: 10px 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
font-family: var(--font-family);
width: 100%;
height: 10vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links{
display: flex;
gap: 15px;
}
.nav-btn{
background: transparent;
border: none;
cursor: pointer;
/* color */
}
.nav-btn:hover{
/* color */
}
.hamburger{
display: none;
flex-direction: column;
}
.login-button button{
padding: 10px 20px;
background-color: var(--input-button-color);
color: var(--text-color);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.hamburger span{
width: 25px;
height: 3px;
background-color: var(--header-text-color);
margin: 4px;
transition: 0.3s;
}
.hamburger.open span:nth-child(1){
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2){
opacity: 0;
}
.hamburger.open span:nth-child(3){
transform: rotate(-45deg) translate(5px, -5px);
}
.header-button{
}
.header-button img{
height: 8vh;
}
@media (max-width:768px) {
.nav-links{
display: none;
position: absolute;
top: 60px;
right: 0;
/* background color */
width: 100%;
flex-direction: column;
align-items: flex-start;
padding: 10px;
}
.nav-links.active{
display: flex;
}
.nav-btn{
width: 100%;
text-align: center;
padding: 10px;
}
.hamburger{
display: flex;
}
.login-button button:hover {
background-color: var(--input-button-hover-color);
}

25
app/styles/responsive.css
View file

@ -8,8 +8,6 @@
/* Header styles */
header {
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
left: 0;
@ -36,17 +34,6 @@
margin: 0;
}
header li button {
margin: 2px;
margin-bottom: 0;
}
header li img {
height: 1.5em;
vertical-align: middle;
margin-top: 10px;
}
/* Left panel styles */
.left-panel {
display: hidden; /* Initially hidden */
@ -120,6 +107,18 @@
.login-button button{
margin: 20px 0;
}
.hamburger.open{
margin-top: 0.5vh;
}
.nav-links{
position: fixed;
}
.hamburger {
display: flex;
}
}
/* Responsive adjustments for the settings */

3
app/styles/variables.css
View file

@ -18,7 +18,8 @@
--left-panel-background-color: #79832e; /* Background color for left panel */
--conversation-background-color: #79832e; /* Background color for conversation container */
--doc-background-color: #ffffff; /* Background color for documents */
--close-button-color: red;
--close-button-color: red;
--burger-menu-background-color: #79832e;
/* FAQ Colors */
--faq-background-color: #474D22; /* Background color for FAQ section */