Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b0c541c

Browse files
committed
add tab navigation between home and settings
1 parent eff3227 commit b0c541c

File tree

5 files changed

+39
-18
lines changed

5 files changed

+39
-18
lines changed
1.76 KB
Loading[フレーム]

‎src/popup/popup.css‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@
66
}
77

88
[data-theme="dark"] {
9-
--background-color: #333;
9+
--background-color: #282828;
1010
--color: #fff;
1111
--border-color: lightgrey;
1212
--link-color: lightgreen;
1313
}
1414

15-
1615
body {
1716
display: flex;
1817
flex-direction: column;
@@ -22,7 +21,7 @@ body {
2221
background-color: var(--background-color);
2322
font-size: var(--dynamic-font-size, 14px);
2423
font-family: 'Roboto', sans-serif;
25-
padding: 20px;
24+
padding: 020px;
2625
width: 400px;
2726
}
2827

@@ -50,17 +49,38 @@ a:hover {
5049
justify-content: center;
5150
}
5251

53-
/* Title & Settings Button */
52+
/* Navigation Tabs */
5453
.navbar {
5554
display: flex;
56-
align-items: center;
57-
margin-bottom: 10px;
55+
justify-content: center;
56+
gap: 20px;
57+
width: 100%;
58+
margin-bottom: 30px;
59+
}
60+
61+
.navbar button:hover {
62+
color: var(--link-color);
63+
}
64+
65+
.tab {
66+
background: none;
67+
border: none;
68+
font-size: var(--dynamic-font-size * 2, 10px);
69+
padding: 8px 16px;
70+
cursor: pointer;
71+
border-bottom: 3px solid transparent;
72+
transition: 0.3s;
73+
color: var(--color);
74+
}
75+
76+
.tab.active {
77+
border-bottom: 3px solid var(--link-color, green);
5878
}
5979

6080
.title {
6181
font-weight: 500;
62-
font-size: var(--dynamic-font-size * 2, 25px);
6382
color: var(--color);
83+
font-size: var(--dynamic-font-size, 10px);
6484
}
6585

6686
.nav-button {

‎src/popup/popup.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@
1010

1111
<body>
1212
<div class="navbar">
13-
<h2 class="title">
14-
Leetcode Explained
15-
</h2>
16-
<a id="open-settings-btn" class="nav-button">
17-
<img src="../assets/images/settings-icon.png" alt="Settings" id="settings-icon" />
18-
</a>
13+
<button id="open-home-btn" class="tab active">
14+
Home
15+
</button>
16+
<button id="open-settings-btn" class="tab">Settings</button>
1917
</div>
18+
<h2 class="title">
19+
Leetcode Explained
20+
</h2>
21+
22+
2023
<!-- GPT Buttons -->
2124
<div class="button-container">
2225
<button id="fix-code-btn" class="material-button button">

‎src/popup/settings.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,8 @@
99

1010
<body>
1111
<div class="navbar">
12-
<h2 class="title">Settings</h2>
13-
<a id="home-button" class="nav-button">
14-
<image src="../assets/images/home-icon.png" alt="Home" />
15-
</a>
12+
<button id="open-home-btn" class="tab ">Home</button>
13+
<button id="open-settings-btn" class="tab active">Settings</button>
1614
</div>
1715
<label for="font-size-select">Font Size</label>
1816
<select name="fontSize" id="font-size-select" class="material-button select settings-btn">

‎src/popup/settings.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
import { initializeTheme, toggleTheme } from "../utils/theme.js";
1111

12-
const homeButton = document.getElementById('home-button') as HTMLButtonElement;
12+
const homeButton = document.getElementById('open-home-btn') as HTMLButtonElement;
1313
homeButton.onclick = () => {
1414
window.location.href = 'popup.html';
1515
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /