dspace-angular/src/app/admin/admin-sidebar/admin-sidebar.component.scss at 11c4e24d58488adcbf9f6a227433a9a18956aed1 · dataquest-dev/dspace-angular · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
:host {

  /* SIDEBAR SIZE AND POSITION */

  /* Sidebar hierarchy:
   § nav
     § .sidebar-full-width-container (any OPTIONAL full width element with no horizontal margin or padding - it can be nested)
       § .sidebar-section-wrapper
         § .sidebar-fixed-element-wrapper
         § .sidebar-collapsible-element-outer-wrapper
           § .sidebar-collapsible-element-inner-wrapper
             § .sidebar-item
   */

  // Sidebar position
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--ds-sidebar-z-index);

  // Sidebar size and content position
  nav#admin-sidebar {

    max-width: var(--ds-admin-sidebar-fixed-element-width); // Sidebar collapsed width

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    div#sidebar-top-level-items-container {
      flex: 1 1 auto; // Fill available vertical space
      overflow-x: hidden;
      overflow-y: auto;
      @include dark-scrollbar;
    }

    img#admin-sidebar-logo {
      height: var(--ds-admin-sidebar-logo-height);
    }

    ::ng-deep {

      // This class must be applied to any nested wrapper containing a sidebar section
      .sidebar-full-width-container {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
      }

      // This class must be applied to the innermost block element containing a section or subsection link
      // (it can be applied together with `sidebar-collapsible-element-inner-wrapper`)
      .sidebar-item {
        padding-top: var(--ds-admin-sidebar-item-padding);
        padding-bottom: var(--ds-admin-sidebar-item-padding);
      }

      // Remove vertical padding from the wrapper and apply it to the anchor
      // In case an anchor also has .sidebar-item, reset it to avoid double padding
      .sidebar-sub-level-item-list {
        .sidebar-item, .ds-menu-item.sidebar-item {
          padding-top: 0;
          padding-bottom: 0;
        }
      }

      // These classes handle the collapsing behavior
      .sidebar-section-wrapper {

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;

        // These elements have fixed width and determine the width of the collapsed sidebar
        & > .sidebar-fixed-element-wrapper {
          min-width: var(--ds-admin-sidebar-fixed-element-width);
          flex: 1 1 auto; // Fill available space

          // Align the icons
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        }

        & > .sidebar-collapsible-element-outer-wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end; // make inner wrapper slide on the left when collapsing
          max-width: calc(100% - var(--ds-admin-sidebar-fixed-element-width)); // fill available space
          padding-left: var(--ds-dark-scrollbar-width); // leave room for scrollbar
          overflow-x: hidden; // hide inner wrapper when sidebar is collapsed

          // These elements have fixed width and slide on the left when the sidebar is collapsed
          // Their content should fill all available space
          & > .sidebar-collapsible-element-inner-wrapper {
            min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width));
            height: 100%;
            padding-right: var(--ds-admin-sidebar-item-padding);
          }
        }
      }

    }

    // Set here any style that depends on the sidebar status
    &.collapsed, &.transitioning, &.expanded { }

  }

  /* SIDEBAR STYLE */

  nav#admin-sidebar {

    background-color: var(--ds-admin-sidebar-bg);

    ::ng-deep {

      color: white;

      // Set here the style of the *-menu-item nested components
      .ds-menu-item {
      }

      a {
        color: var(--ds-admin-sidebar-link-color);
        text-decoration: none;

        &:hover, &:focus {
          color: var(--ds-admin-sidebar-link-hover-color);
        }
      }
    }

    div#sidebar-header-container {
      background-color: var(--ds-admin-sidebar-header-bg);
      .sidebar-fixed-element-wrapper {
        background-color: var(--ds-admin-sidebar-header-bg);
      }
    }

    div#sidebar-collapse-toggle-container {
      .sidebar-collapsible-element-inner-wrapper {
      }
    }
  }
}