template-playground/src/styles/components/Sidebar.ts at 01320858280c679ce9a0265f0e9bfa3091d4f252 · accordproject/template-playground · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import styled from "styled-components";
import { NavLink } from "react-router-dom";

export const SidebarContainer = styled.div`
  width: 260px;
  background-color: var(--bg-color) !important;
  padding: 1rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: relative;
  overflow-y: auto;
  border-right: 1px solid #ddd;
  @media (max-width: 768px) {
    width: 100%;
    height: auto;
    position: static;
  }
`;

export const SidebarTitle = styled.h2`
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--text-color) !important;
`;

export const SidebarList = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0;
`;

export const SidebarListItem = styled.li`
  margin-bottom: 0.5rem;
`;

export const SidebarLink = styled(NavLink)`
  text-decoration: none;
  display: block;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color) !important;
  transition: background-color 0.3s, color 0.3s;

  &.active {
    background-color: var(--active-bg-color) !important;
    color: var(--active-text-color) !important;
    font-weight: 600;
    border-left: 2.5px solid #19c6c7;
  }

  &:hover {
    background-color: var(--hover-bg-color) !important;
    color: var(--hover-text-color) !important;
    text-decoration: underline;
  }
`;

export const HelperBox = styled.div`
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background-color: #e6f7ff;
  border-radius: 4px;
  font-size: 0.9rem;

  @media (max-width: 768px) {
    display: none;
  }
`;

export const HelperIcon = styled.div`
  margin-right: 0.5rem;
  font-size: 1.2rem;
  color: #19c6c7;
`;

export const HelperText = styled.div`
  flex: 1;
  color: #333;

  a {
    color: #19c6c7 !important;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  & > a {
    margin-left: 0.25rem;
  }
`;

export const DividerLine = styled.div`
  height: 1px;
  background-color: #ddd;
  margin: 7rem 0 1rem 0;
`;