Add feed button

This commit is contained in:
Greg Shuflin 2025-02-05 03:08:14 -08:00
parent df46571240
commit ee06791ef7
2 changed files with 29 additions and 9 deletions

View File

@ -23,6 +23,23 @@ body.with-sidebar {
.sidebar h2 { .sidebar h2 {
color: var(--primary-red); color: var(--primary-red);
margin-top: 0; margin-top: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-add-feed {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 0.25rem;
font-size: 1.2rem;
transition: color 0.2s ease;
}
.sidebar-add-feed:hover {
color: var(--primary-red);
} }
.sidebar ul { .sidebar ul {
@ -131,8 +148,8 @@ body.with-sidebar {
background-color: #333; background-color: #333;
color: white; color: white;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
display: flex; display: grid;
justify-content: space-between; grid-template-columns: 1fr auto 1fr;
align-items: center; align-items: center;
position: fixed; position: fixed;
top: 0; top: 0;
@ -146,9 +163,8 @@ body.with-sidebar {
margin: 0; margin: 0;
color: var(--primary-red); color: var(--primary-red);
font-weight: 500; font-weight: 500;
position: absolute; text-align: center;
left: 50%; grid-column: 2;
transform: translateX(-50%);
} }
.feed-title-separator { .feed-title-separator {
@ -582,6 +598,8 @@ button:disabled {
/* User menu styles */ /* User menu styles */
.user-menu { .user-menu {
position: relative; position: relative;
grid-column: 3;
justify-self: end;
} }
.user-menu-button { .user-menu-button {

View File

@ -9,9 +9,6 @@
</head> </head>
<body class="with-sidebar"> <body class="with-sidebar">
<header class="top-bar"> <header class="top-bar">
<nav class="top-bar-buttons">
<button class="add-feed-button" id="addFeedButton">Add Feed</button>
</nav>
<h1 class="top-bar-title">RSS Reader</h1> <h1 class="top-bar-title">RSS Reader</h1>
<div class="user-menu"> <div class="user-menu">
<button class="user-menu-button" id="userMenuButton"> <button class="user-menu-button" id="userMenuButton">
@ -51,7 +48,12 @@
</dialog> </dialog>
<aside class="sidebar"> <aside class="sidebar">
<h2>Feeds</h2> <h2>
Feeds
<button class="sidebar-add-feed" id="addFeedButton" title="Add Feed">
<i class="fas fa-plus"></i>
</button>
</h2>
<nav id="feedList"> <nav id="feedList">
</nav> </nav>
</aside> </aside>